//显示页面
$(function () {
  showData();

  $(".nav ul li").each(function (index) {
    $(".total_chose_box").hide();
    $(this).click(function () {
      $(".total_chose_box").hide();
      $(".nav ul li").removeClass("nav_active");
      $(this).addClass("nav_active");
      $(".index_tabs .mainbox")
        .eq(index)
        .fadeIn()
        .siblings("div")
        .stop()
        .hide();
      // if (index == 0) {
      //   showData();
      // } else
      if (index == 1) {
        showMap();
      } else if (index == 2) {
        showMove();
      } else if (index == 3) {
        showInner();
      } else if (index == 4) {
        showSales();
      } else if (index == 5) {
        $(".total_chose_box").show();
        showRegion();
      } else if (index == 6) {
        $(".total_chose_box").show();
        showUnits();
      }
      // if (intervalId) {
      //   console.log("停止定时器");
      //   clearInterval(intervalId); // 停止计时器
      //   intervalId = null;
      // }
    });
  });
});

function showUnits() {
  var options = [
    { text: "杜家沟煤业", value: "1" },
    { text: "薛虎沟煤业", value: "2" },
    { text: "腾辉洗煤厂", value: "3" },
    { text: "赵城站", value: "4" },
  ];
  $(".year_chose").empty();
  $.each(options, function (i, option) {
    $(".year_chose").append(
      $("<option>", {
        value: option.value,
        text: option.text,
      })
    );
  });
}

function showRegion() {
  var options = [
    { text: "晋南公司", value: "1" },
    { text: "晋北公司", value: "2" },
    { text: "汾河公司", value: "3" },
    { text: "吕梁公司", value: "4" },
  ];
  $(".year_chose").empty();
  $.each(options, function (i, option) {
    $(".year_chose").append(
      $("<option>", {
        value: option.value,
        text: option.text,
      })
    );
  });
}

//地图界面
function showMap() {
  //地图
  $(function () {
    //煤矿
    const img1 = "image://./images/c-01.png";
    //销售站
    const img2 = "image://./images/c-02.png";
    //煤矿、销售站、洗煤厂
    const img3 = "image://./images/c-03.png";
    //煤矿、洗煤厂
    const img4 = "image://./images/c-04.png";
    //洗煤厂
    const img5 = "image://./images/c-3.png";
    const fontBg = "image://./images/font-bg.png";

    const planePath = "image://./images/truck.svg";
    var myChart = echarts.init(document.getElementById("center-one-2"));
    var uploadedDataURL = "http://localhost:8081/shanxi.svg";
    // var uploadedDataURL =
    //   "https://i.postimg.cc/NMmcDTVm/EE5-E7-BC52-E0-A355.png";
    const provinces = [
      {
        city: true,
        name: "晋北公司",
        coord: [1383.6, 759.1],
        textLine: "",
        symbol: img1,
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#f44336", //"#00eaff"
        },
      },
      {
        name: "古交市",
        coord: [1287.7, 755.4],
      },
      {
        name: "清徐县",
        coord: [1322.5, 855],
      },
      {
        name: "娄烦县",
        coord: [1165.4, 708.5],
      },
      // {
      //     name: '阳曲县',
      //     coord: [1496.5, 744.6]
      // },
      {
        name: "小店县",
        coord: [1388.5, 804.2],
      },
      {
        name: "万柏林区",
        coord: [1337.3, 783.6],
      },
      //=======
      {
        city: true,
        name: "忻州",
        coord: [1544, 638],
        textLine: "中煤1134",
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#f44336",
        },
      },
      {
        name: "保德县",
        coord: [1120, 436],
      },
      {
        name: "河曲县",
        coord: [1236, 359],
      },
      // {
      //     name: '其岚县',
      //     coord: [1214, 483]
      // },
      // {
      //     name: '偏关县',
      //     coord: [1368, 342]
      // },
      // {
      //     name: '五寨县',
      //     coord: [1324, 483]
      // },
      {
        //city: true,
        name: "静乐县",
        coord: [1317, 611],
        textLine: "",
      },
      // {
      //     name: '神池县',
      //     coord: [1460, 474]
      // },
      {
        name: "宁武县",
        coord: [1546.2, 501.7],
      },
      {
        name: "原平市",
        coord: [1638, 547],
      },
      // {
      //     name: '定襄县',
      //     coord: [1702, 639]
      // },
      // {
      //     name: '代县',
      //     coord: [1817, 507]
      // },
      {
        name: "五台县",
        coord: [1861, 624],
      },
      // {
      //     name: '繁峙县',
      //     coord: [1979, 513]
      // },
      //============
      {
        city: true,
        name: "朔州",
        coord: [1604, 391],
        textLine: "煤泥1212",
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#00eaff", //"#00eaff"
        },
      },
      {
        name: "朔城区",
        coord: [1612.6, 430.6],
      },
      {
        name: "怀仁市",
        coord: [1898, 334],
      },
      {
        name: "应县",
        coord: [1920, 414],
      },
      {
        name: "山阴县",
        coord: [1732, 361],
      },
      {
        name: "右玉县",
        coord: [1711, 218],
      },
      {
        name: "平鲁区",
        coord: [1538.6, 332.6],
      },
      //=========
      {
        city: true,
        name: "大同",
        coord: [2102, 320],
        textLine: "煤泥1212",
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#00eaff", //"#00eaff"
        },
      },
      // {
      //     name: '大同县',
      //     coord: [2166, 351]
      // },
      {
        name: "左云县",
        coord: [1826.7, 262.3],
      },
      // {
      //     name: '阳高县',
      //     coord: [2229.9, 248.6]
      // },
      {
        name: "浑源县",
        coord: [2140.5, 436.7],
      },
      // {
      //     name: '天镇县',
      //     coord: [2386.3, 244.1]
      // },
      // {
      //     name: '广灵县',
      //     coord: [2296.2, 428]
      // },
      // {
      //     name: '灵丘县',
      //     coord: [2237.8, 503.2]
      // },
      {
        name: "新荣区",
        coord: [2028.5, 215.6],
      },
      {
        name: "云冈区",
        coord: [2015.9, 281],
      },
      {
        name: "云州区",
        coord: [2195.8, 316.2],
      },
      //=========
      {
        city: true,
        name: "阳泉",
        coord: [1769.6, 861.7],
        textLine: "煤泥1212",
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#00eaff", //"#00eaff"
        },
      },
      {
        name: "盂县",
        coord: [1759.3, 766.8],
      },
      {
        name: "平定县",
        coord: [1808, 881.4],
      },
      {
        name: "郊区",
        coord: [1760.2, 825.6],
      },
      {
        name: "矿区",
        coord: [1728, 844.8],
      },
      //=========
      {
        city: true,
        name: "吕梁",
        coord: [943, 804],
        textLine: "煤泥1212",
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#00eaff", //"#00eaff"
        },
      },
      // {
      //     name: '汾阳市',
      //     coord: [1076.3, 874.2]
      // },
      {
        name: "孝义市",
        coord: [1013.2, 910.5],
      },
      {
        name: "临县",
        coord: [876.3, 625],
      },
      {
        name: "岚县",
        coord: [1115.2, 608.6],
      },
      {
        name: "兴县",
        coord: [990.9, 561.8],
      },
      {
        name: "方山县",
        coord: [997.1, 707.3],
      },
      {
        name: "中阳县",
        coord: [883, 862.8],
      },
      {
        name: "柳林县",
        coord: [791.7, 766.8],
      },
      {
        name: "文水县",
        coord: [1191, 864.9],
      },
      {
        name: "交城县",
        coord: [1171.1, 821],
      },
      {
        name: "交口县",
        coord: [818.5, 927.2],
      },
      // {
      //     name: '石楼县',
      //     coord: [697.2, 871.1]
      // },
      {
        name: "离石县",
        coord: [942.5, 876.7],
      },
      //=========
      {
        city: true,
        name: "晋中",
        coord: [1459, 905],
        textLine: "煤泥1212",
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#00eaff", //"#00eaff"
        },
      },
      {
        name: "介休市",
        coord: [1063.3, 975.5],
      },
      // {
      //     name: '祁县',
      //     coord: [1247.6, 943.3]
      // },
      {
        name: "寿阳县",
        coord: [1620.6, 839.3],
      },
      {
        name: "昔阳县",
        coord: [1760.1, 966],
      },
      {
        name: "平遥县",
        coord: [1177.5, 954.1],
      },
      {
        name: "灵石县",
        coord: [967, 1010.2],
      },
      {
        name: "左权县",
        coord: [1598.3, 1051.3],
      },
      {
        name: "和顺县",
        coord: [1686.1, 1019],
      },
      // {
      //     name: '榆社县',
      //     coord: [1444.1, 1022.9]
      // },
      {
        name: "榆次区",
        coord: [1482.7, 922.4],
      },
      //=========
      {
        city: true,
        name: "临汾",
        coord: [808, 1162],
        textLine: "煤泥1212",
        symbol: img3,
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#00eaff", //"#00eaff"
        },
      },
      {
        name: "霍州市",
        coord: [946.3, 1095.4],
      },
      // {
      //     name: '侯马市',
      //     coord: [656, 1264.1]
      // },
      {
        name: "古县",
        coord: [988.5, 1161.9],
      },
      {
        name: "吉县",
        coord: [496.5, 1113],
      },
      {
        name: "隰县",
        coord: [725.3, 1025.3],
      },
      {
        name: "蒲县",
        coord: [666.3, 1136.4],
      },
      // {
      //     name: '曲沃县',
      //     coord: [706, 1272.8]
      // },
      {
        name: "翼城县",
        coord: [825.2, 1269.7],
      },
      // {
      //     name: '襄汾县',
      //     coord: [1111, 1111]
      // },
      {
        name: "洪洞县",
        coord: [871.2, 1137.9],
      },
      {
        name: "安泽县",
        coord: [1060.5, 1210.3],
      },
      // {
      //     name: '浮山县',
      //     coord: [899.7, 1219.1]
      // },
      {
        name: "乡宁县",
        coord: [537.8, 1165.9],
      },
      // {
      //     name: '大宁县',
      //     coord: [551.9, 1053]
      // },
      // {
      //     name: '永和县',
      //     coord: [599.3, 977.3]
      // },
      // {
      //     name: '汾西县',
      //     coord: [856.4, 1057.9]
      // },
      {
        name: "尧都县",
        coord: [815.1, 1202.5],
      },
      //=========
      {
        city: true,
        name: "长治",
        coord: [1336.6, 1222.4],
        textLine: "煤泥1212",
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#00eaff", //"#00eaff"
        },
      },
      // {
      //     name: '沁县',
      //     coord: [1246.7, 1076.4]
      // },
      {
        name: "长子县",
        coord: [1251, 1256.2],
      },
      {
        name: "沁源县",
        coord: [1133.1, 1121.2],
      },
      // {
      //     name: '平顺县',
      //     coord: [1491.9, 1238.5]
      // },
      {
        name: "武乡县",
        coord: [1353, 1094.8],
      },
      {
        name: "襄垣县",
        coord: [1398.1, 1142.4],
      },
      // {
      //     name: '黎城县',
      //     coord: [1501.9, 1157.2]
      // },
      {
        name: "壶关县",
        coord: [1435.8, 1282.8],
      },
      {
        name: "屯留县",
        coord: [1258.3, 1155.4],
      },
      {
        name: "潞州区",
        coord: [1371.2, 1212.7],
      },
      {
        name: "潞城区",
        coord: [1405.4, 1197.7],
      },
      {
        name: "上党区",
        coord: [1303.9, 1310.6],
      },
      //=========
      {
        city: true,
        name: "运城",
        coord: [492, 1367],
        textLine: "煤泥1212",
        lineStyle: {
          width: 1,
          curveness: -0.3,
          color: "white",
        },
      },
      {
        name: "河津市",
        coord: [410.9, 1249.3],
        textLine: "精煤819",
        symbol: img3,
      },
      // {
      //     name: '永济市',
      //     coord: [216.2, 1401.4]
      // },
      // {
      //     name: '夏县',
      //     coord: [1111, 1111]
      // },
      // {
      //     name: '绛县',
      //     coord: [732.8, 1337.7]
      // },
      // {
      //     name: '新绛县',
      //     coord: [545.1, 1290.9]
      // },
      // {
      //     name: '临猗县',
      //     coord: [317, 1350.1]
      // },
      // {
      //     name: '万荣县',
      //     coord: [385.9, 1311.7]
      // },
      // {
      //     name: '闻喜县',
      //     coord: [613.2, 1351.3]
      // },
      // {
      //     name: '稷山县',
      //     coord: [482.1, 1270.3]
      // },
      // {
      //     name: '垣曲县',
      //     coord: [700.8, 1407]
      // },
      // {
      //     name: '平陆县',
      //     coord: [447.2, 1451.8]
      // },
      // {
      //     name: '芮城县',
      //     coord: [280.8, 1434.5]
      // },
      //=========
      {
        city: true,
        name: "晋城",
        coord: [1137, 1376],
        textLine: "",
        symbol: img1,
        lineStyle: {
          width: 1,
          curveness: -0.3,
          color: "red",
        },
      },
      {
        name: "高平市",
        coord: [1186.7, 1326.3],
      },
      {
        name: "泽州县",
        coord: [1185.2, 1390.3],
      },
      {
        name: "沁水县",
        coord: [917.3, 1348.7],
      },
      {
        name: "阳城县",
        coord: [986.3, 1394.9],
      },
      {
        name: "陵川县",
        coord: [1346.6, 1407.8],
      },
    ];
    //1383.6, 759.1
    var from = [
      [410.9, 1249.3],
      [410.9, 1249.3],
      [410.9, 1249.3],
      [410.9, 1249.3],
      [1317, 611],
      [1317, 611],
      [1317, 611],
      [1317, 611],
      [1317, 611],
      [410.9, 1249.3],
      [1317, 611],
      [1317, 611],
    ];
    // const datas = {
    //   from: from,
    //   to: provinces
    //     .filter((item) => item.city === true)
    //     .map((item, index) => {
    //       item.value = index % 2 === 0 ? 1 : 10;
    //       // if (item.coord[0] < 1380) {
    //       //   item.lineStyle = {
    //       //     curveness: -0.3,
    //       //     color: "red",
    //       //   };
    //       // }
    //       return item;
    //     }),
    //   other: provinces.filter((item) => item.city === undefined),
    // };
    var to = [
      //===太原====
      {
        //city: true,
        name: "晋北公司",
        value: 100,
        coord: [1383.6, 759.1], //[110.6119, 35.7352]
        textLine: "精煤819",
        symbol: img1,
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "white", //"#00eaff"
        },
      },
      //====忻州===
      {
        //city: true,
        name: "忻州",
        value: 110,
        coord: [1544, 638], //[110.6119, 35.7352]
        textLine: "中煤1134",
        symbol: img2,
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#f44336",
        },
      },
      //======朔州======
      {
        //city: true,
        name: "朔州",
        coord: [1604, 391],
        textLine: "煤泥1212",
        symbol: img3,
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#00eaff", //"#00eaff"
        },
      },
      //====大同=====
      {
        //city: true,
        name: "大同",
        coord: [2102, 320],
        textLine: "煤泥1212",
        symbol: img5,
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#00eaff", //"#00eaff"
        },
      },
      //====阳泉=====
      {
        //city: true,
        name: "晋北公司销售站",
        symbol: img4,
        coord: [1769.6, 861.7],
        textLine: "煤泥1212",
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#00eaff", //"#00eaff"
        },
      },
      //====吕梁=====
      {
        //city: true,
        name: "吕梁",
        coord: [943, 804],
        textLine: "煤泥1212",
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#00eaff", //"#00eaff"
        },
      },
      //====晋中=====
      {
        //city: true,
        name: "晋中",
        coord: [1459, 905],
        textLine: "煤泥1212",
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#00eaff", //"#00eaff"
        },
      },
      //====临汾=====
      {
        //city: true,
        name: "临汾",
        coord: [808, 1162],
        textLine: "煤泥1212",
        symbol: img3,
        lineStyle: {
          width: 1,
          curveness: 0.3,
          color: "#00eaff", //"#00eaff"
        },
      },
      //=====晋城======
      {
        //city: true,
        name: "晋城",
        coord: [1137, 1376],
        textLine: "中煤2405",
        symbol: img1,
        lineStyle: {
          width: 1,
          curveness: -0.3,
          color: "red",
        },
      },
    ];
    var other = [
      {
        name: "河津市",
        coord: [410.9, 1249.3], //110.6119, 35.7352
        //textLine: "",
        symbol: img3,
        itemStyle: {
          color: "red",
        },
      },
      {
        name: "杜家沟洗煤厂",
        coord: [485.9, 1311.7],
        symbol: img5,
        itemStyle: {
          color: "yellow",
        },
      },
      {
        name: "薛虎沟",
        coord: [613.2, 1351.3],
        symbol: img5,
        itemStyle: {
          color: "yellow",
        },
      },
      {
        //city: true,
        name: "静乐县",
        coord: [1317, 611],
        //textLine: "",
        symbol: img4,
        itemStyle: {
          color: "red",
        },
      },
    ];
    const datas = {
      from: from,
      to: to,
      other: other,
    };
    console.log(datas);
    option = {};
    $.get(uploadedDataURL, function (svg) {
      echarts.registerMap("organ_diagram", { svg: svg });

      // const random = (lower, upper) => {
      //   lower = +lower || 0;
      //   upper = +upper || 0;
      //   return Math.random() * (upper - lower) + lower;
      // };

      console.log(datas);

      option = {
        backgroundColor: "rgba(0,0,0,0)",
        title: {
          //text: "山西省调运路线图总览",
          left: "center",
          top: 0,
          textStyle: {
            color: "rgba(255,255,255,1)",
            fontSize: 30,
          },
        },
        //鼠标移动到当前坐标显示的数据
        tooltip: {
          show: true,
          trigger: "item",
          backgroundColor: "rgba(166, 200, 76, 1)",
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          formatter: function (params, ticket, callback) {
            //console.log(params);
            //根据业务自己拓展要显示的内容
            var res = "";
            var name = params.name;
            var value = params.value[params.seriesIndex + 1] || params.value;
            res =
              "<span style='color:#fff;'>" +
              name +
              "</span><br/>数据：" +
              value;
            return res;
          },
        },
        // visualMap: {
        //   //图例值控制
        //   min: 1,
        //   max: 100,
        //   calculable: true,
        //   show: false,
        //   color: ["#f44336", "#00eaff"],
        //   textStyle: {
        //     color: ["#f44336", "#00eaff"],
        //   },
        // },
        graphic: {
          type: "image",
          id: "myImage", // 图形元素的唯一标识
          // bottom: "center", // 图片的位置
          // top: "center", // 图片的位置
          bottom: 10,
          right: 10,
          // z: 0, // 控制层叠关系，-10 表示放置在底层
          style: {
            image: "./images/tuli-01.png", // 图片的 URL
            width: 300, // 图片宽度
            height: 300, // 图片高度
          },
        },
        geo: {
          top: 0,
          left: 10,
          right: 10,
          bottom: 0,
          roam: true,
          map: "organ_diagram",
          zoom: 1.15,
          //rotation: 90,
          // layoutCenter: ["65%", "55%"],
          // layoutSize: "200%",
          // itemStyle: {
          //   borderWidth: 0,
          // },
          emphasis: {
            //focus: "none",
            itemStyle: {
              areaColor: "#ffffff",
            },
            label: {
              show: false,
            },
          },
          // regions: [
          //   {
          //     name: "map11",
          //     itemStyle: {
          //       areaColor: "red",
          //       color: "red",
          //     },
          //   },
          // ],
        },
        series: [
          //飞翔线路
          {
            type: "lines",
            coordinateSystem: "geo",
            symbol: ["none", "arrow"],
            z: 1,
            zlevel: 2,
            animation: false,
            label: {
              show: true, // 显示标签
              //color: "#ABF8FF",
              fontSize: 15, //字体大小
              position: "middle", // 标签位置
              formatter: function (params) {
                return params.data.textLine;
              }, // 标签文本格式化
              // rich: {
              //   fline: {
              //     padding: [0, 25],
              //     color: "#fff",
              //     fontSize: 50,
              //     fontWeight: 600,
              //   },
              //   tline: {
              //     padding: [0, 27],
              //     color: "#ABF8FF",
              //     fontSize: 50,
              //   },
              // },
            },
            effect: {
              show: true,
              period: 6,
              trailLength: 0.6,
              symbolSize: 10,
              //改变线条上的图标
              symbol: "pin",
              loop: true,
            },
            // lineStyle: {
            //   width: 1,
            //   curveness: 0.3,
            // },
            //color: ["#f44336", "#fff"],
            data: datas.to.map((item, index) => {
              console.log(item);
              return {
                lineStyle: item.lineStyle || {},
                coords: [datas.from[index], item.coord],
                name: item.name,
                value: item.value,
                //effect: item.effect,
                textLine: item.textLine,
              };
            }),
          },
          // 字体背景
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 5,
            label: {
              show: true,
              formatter: function (params) {
                return params.data.name;
              },
              color: "#fff",
              fontSize: 14,
              rich: {
                fline: {
                  padding: [0, 25],
                  color: "#fff",
                  fontSize: 15,
                  fontWeight: 600,
                },
                tline: {
                  padding: [0, 27],
                  color: "#ABF8FF",
                  fontSize: 15,
                },
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              color: "#00FFF6",
              opacity: 1,
            },
            symbol: fontBg,
            symbolSize: [120, 60],
            symbolOffset: [0, 40],
            z: 999,
            data: datas.to.map(function (item) {
              console.log(item);
              return {
                name: item.name,
                value: [...item.coord, item.value],
              };
            }),
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 3,
            rippleEffect: {
              //涟漪特效
              period: 0, //动画时间，值越小速度越快
              brushType: "stroke", //波纹绘制方式 stroke, fill
              scale: 0, //波纹圆环最大限制，值越大波纹越大
            },
            label: {
              //show: true,
              position: "right", //显示位置
              offset: [10, 0], //偏移设置
              color: "#fff",
              fontSize: 18,
              formatter: function (params) {
                //圆环显示文字
                return params.data.name;
              },
              shadowColor: "#16ffff",
            },
            emphasis: {
              show: true,
              color: "#f60",
            },
            // symbol: "circle",
            // symbolSize: function (val) {
            //   return 5; //圆环大小
            // },
            itemStyle: {
              color: "#f00",
              opacity: 1,
            },
            data: datas.to.map(function (item) {
              console.log(item);
              return {
                name: item.name,
                symbol: item.symbol,
                symbolSize: 15,
                value: [...item.coord, item.value],
              };
            }),
            // tooltip: {
            //   formatter: (params) => {
            //     return params.name;
            //   },
            // },
          },
          //other
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 3,
            rippleEffect: {
              //涟漪特效
              period: 4, //动画时间，值越小速度越快
              brushType: "stroke", //波纹绘制方式 stroke, fill
              scale: 1, //波纹圆环最大限制，值越大波纹越大
            },
            label: {
              show: true,
              position: "right",
              //offset:[5, 0],
              color: "#0f0",
              formatter: "{b}",
              textStyle: {
                color: "#0f0",
              },
            },
            emphasis: {
              show: true,
              color: "#f60",
            },
            // symbol: "circle",
            // symbolSize: function (val) {
            //   return 5; //圆环大小
            // },
            data: datas.other.map(function (item, index) {
              console.log(item);
              return {
                name: item.name,
                symbol: item.symbol,
                symbolSize: 30,
                value: [...item.coord, 1],
                itemStyle: item.itemStyle,
              };
            }),
            tooltip: {
              formatter: (params) => {
                return params.name;
              },
            },
          },
          //被攻击点
          // {
          //   type: "effectScatter",
          //   coordinateSystem: "geo",
          //   zlevel: 2,
          //   rippleEffect: {
          //     //涟漪特效
          //     period: 4, //动画时间，值越小速度越快
          //     brushType: "stroke", //波纹绘制方式 stroke, fill
          //     scale: 4, //波纹圆环最大限制，值越大波纹越大
          //   },
          //   label: {
          //     show: false,
          //     position: "right",
          //     //offset:[5, 0],
          //     color: "#0f0",
          //     formatter: "{b}",
          //     textStyle: {
          //       color: "#0f0",
          //     },
          //   },
          //   emphasis: {
          //     show: true,
          //     color: "#f60",
          //   },
          //   symbol: "circle",
          //   symbolSize: function (val) {
          //     return 5; //圆环大小
          //   },
          //   data: [
          //     {
          //       name: "平阳",
          //       value: [...datas.from[0], 10],
          //     },
          //   ],
          //   tooltip: {
          //     formatter: (params) => {
          //       return params.name;
          //     },
          //   },
          // },
        ],
      };

      myChart.setOption(option);

      // myChart.on("click", function (event) {
      //   console.log(event);
      //   myChart.dispatchAction({
      //     type: "highlight",
      //     geoIndex: 0,
      //     name: event.name,
      //   });
      // });
    });

    window.addEventListener("resize", myChart.resize);
  });
}

//显示运输
function showMove() {
  const img1 = "image://./images/c-1.png";
  const planePath = "image://./images/truck.svg";
  const mapList = {
    code: 200,
    result: [
      //运城市
      {
        city: "运城市",
        //点位数据
        points: [
          {
            name: "薛虎沟煤业",
            value: [110.6119, 35.7352],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "薛虎沟洗煤厂",
            value: [110.6858, 35.6763],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "腾晖煤业",
            value: [110.6271, 35.7865],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "腾晖洗煤厂",
            value: [110.6989, 35.6828],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "杜家沟煤业",
            value: [110.6466, 35.6813],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "杜家沟洗煤厂",
            value: [110.7401, 35.6595],
            symbol: img1,
            symbolSize: 10,
          },
        ],
        //路线
        lines: [
          {
            coords: [
              [110.6119, 35.7352],
              [110.7401, 35.6595],
            ],
            // 统一的样式设置
            lineStyle: {
              type: "dashed", //solid:实线 dashed：虚线 dotted：圆点
              color: "#93E8F8", //线条颜色
              width: 2.5, //线条宽度
              opacity: 0.5, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
          {
            coords: [
              [110.6466, 35.6813],
              [110.6271, 35.7865],
            ],
            lineStyle: {
              type: "dotted", //solid:实线 dashed：虚线 dotted：圆点
              color: "#91cc75", //线条颜色
              width: 2.5, //线条宽度
              opacity: 0.5, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
        ],
        //是否显示线路
        show: true,
        zoom: 2,
        //地图位置：
        layoutCenter: ["65%", "90%"], //
        layoutSize: "120%", //"100%"
        name: "晋南区",
        text: "JINNAN",
      },
      //临汾市
      {
        city: "临汾市",
        //点位数据
        points: [
          {
            name: "霍州煤电集团",
            value: [111.74, 36.575],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "辛置矿",
            value: [111.6833, 36.4166],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "李雅庄矿",
            value: [111.7237, 36.608],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "白龙矿",
            value: [111.7025, 36.5676],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "紫晟煤业",
            value: [111.7525, 36.5676],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "赵城站",
            value: [111.706, 36.3759],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "三交河矿",
            value: [111.4307, 36.3937],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "回坡底矿",
            value: [111.5315, 36.4478],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "干河矿",
            value: [111.5902, 36.4341],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "亿隆煤业",
            value: [111.5978, 36.38],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "亿隆洗煤厂",
            value: [111.6257, 36.3626],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "龙马站",
            value: [111.5744, 36.2609],
            symbol: img1,
            symbolSize: 10,
          },
        ],
        //路线
        lines: [
          {
            coords: [
              [111.706, 36.3759],
              [111.4307, 36.3937],
            ],
            // 统一的样式设置
            lineStyle: {
              type: "dashed", //solid:实线 dashed：虚线 dotted：圆点
              color: "#93E8F8", //线条颜色
              width: 2.5, //线条宽度
              opacity: 0.5, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
          {
            coords: [
              [111.5315, 36.4478],
              [111.5744, 36.2609],
            ],
            lineStyle: {
              type: "dotted", //solid:实线 dashed：虚线 dotted：圆点
              color: "#91cc75", //线条颜色
              width: 2.5, //线条宽度
              opacity: 0.5, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
        ],
        //是否显示线路
        show: true,
        zoom: 1.3,
        //地图位置：
        layoutCenter: ["50%", "70%"],
        layoutSize: "100%",
        name: "临汾区",
        text: "LINFEN",
      },
      {
        city: "忻州市",
        //点位数据
        points: [
          {
            name: "晋北煤业",
            value: [112.0039, 38.2872],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "晋北洗煤厂",
            value: [112.0008, 38.3636],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "汾源煤业",
            value: [112.1116, 38.4922],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "汾源洗煤厂",
            value: [112.1108, 38.5883],
            symbol: img1,
            symbolSize: 10,
          },
          {
            name: "金能煤业",
            value: [112.0365, 38.4098],
            symbol: img1,
            symbolSize: 10,
          },
        ],
        //路线
        lines: [
          {
            coords: [
              [112.0039, 38.2872],
              [112.1116, 38.4922],
            ],
            // 统一的样式设置
            lineStyle: {
              type: "dashed", //solid:实线 dashed：虚线 dotted：圆点
              color: "#93E8F8", //线条颜色
              width: 2.5, //线条宽度
              opacity: 0.5, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
          {
            coords: [
              [112.0008, 38.3636],
              [112.1108, 38.5883],
            ],
            lineStyle: {
              type: "dotted", //solid:实线 dashed：虚线 dotted：圆点
              color: "#91cc75", //线条颜色
              width: 2.5, //线条宽度
              opacity: 0.5, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
          },
        ],
        //是否显示线路
        show: true,
        zoom: 2,
        //地图位置：
        layoutCenter: ["50%", "50%"],
        layoutSize: "80%",
        name: "晋北区",
        text: "JINBEI",
      },
    ],
  };

  //#endregion 晋南
  $(function () {
    var myChart = echarts.init(document.getElementById("left-one-3"));
    //var planePath = "image://./images/truck.svg";

    var hejinshi = "https://geo.datav.aliyun.com/areas_v3/bound/140882.json";
    $.getJSON(hejinshi, function (geoJson) {
      console.log("发起请求");
      echarts.registerMap("河津市", geoJson);
      var levelColorMap = {
        1: "rgba(241, 109, 115, .8)",
        2: "rgba(255, 235, 59, .7)",
        3: "rgba(147, 235, 248, 1)",
      };

      var opt = {
        bgColor: "rgba(255,255,255,0)", // 画布背景色
        mapName: "河津市",
      }; // 地图名}
      console.log(opt);
      // 层级索引
      var name = [opt.mapName];

      var idx = 0;
      //地图标题位置
      var pos = {
        leftPlus: 115,
        leftCur: 0,
        left: 50,
        top: 50,
      };

      var line = [
        [0, 0],
        [8, 22],
        [0, 22],
      ];
      // style
      var style = {
        font: '18px "Microsoft YaHei", sans-serif',
        textColor: "#eee",
        lineColor: "rgba(147, 235, 248, .8)",
      };
      console.log(name);
      var option = {
        backgroundColor: opt.bgColor,
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(12, 204, 104, 0.92)",
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          // formatter: function (params, ticket, callback) {
          //   //根据业务自己拓展要显示的内容
          //   var res = "";
          //   var name = params.name;
          //   var value = params.value;
          //   res =
          //     "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
          //   return res;
          // },
        },
        graphic: [
          {
            type: "group",
            left: pos.left,
            top: pos.top - 4,
            //显示标题下的横线
            children: [
              {
                type: "line", //上横线
                left: 0,
                top: -20,
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 80,
                  y2: 0,
                },
                style: {
                  stroke: style.lineColor,
                },
              },
              {
                type: "line", //下横线
                left: 0,
                top: 20,
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 80,
                  y2: 0,
                },
                style: {
                  stroke: style.lineColor,
                },
              },
            ],
          },
          {
            id: name[idx],
            type: "group",
            left: pos.left + 2,
            top: pos.top,
            children: [
              {
                type: "polyline",
                left: 90,
                top: -12,
                shape: {
                  points: line,
                },
                style: {
                  stroke: "transparent",
                  key: name[0],
                },
                // onclick: function () {
                //   var name = this.style.key;
                //   handleEvents.resetOption(chart, option, name);
                // },
              },
              {
                type: "text",
                left: 0,
                top: "middle",
                style: {
                  text: mapList.result.find((item) => item.city == "运城市")
                    .name,
                  textAlign: "center",
                  fill: style.textColor,
                  font: style.font,
                },
                // onclick: function () {
                //   handleEvents.resetOption(chart, option, "山西");
                // },
              },
              {
                type: "text",
                left: 0,
                top: 10,
                style: {
                  text: mapList.result.find((item) => item.city == "运城市")
                    .text,
                  textAlign: "center",
                  fill: style.textColor,
                  //font: '12px "Microsoft YaHei", sans-serif',
                },
                // onclick: function () {
                //   handleEvents.resetOption(chart, option, "山西");
                // },
              },
            ],
          },
        ],
        geo: {
          map: opt.mapName,
          zoom: mapList.result.find((item) => item.city == "运城市").zoom,
          layoutCenter: mapList.result.find((item) => item.city == "运城市")
            .layoutCenter,
          layoutSize: mapList.result.find((item) => item.city == "运城市")
            .layoutSize,
          roam: true,

          label: {
            // normal: {
            //   //显示市级名字
            //   //show: true,
            //   textStyle: {
            //     color: "#fff",
            //   },
            // },
            emphasis: {
              textStyle: {
                color: "rgba(0,0,0,1)",
              },
            },
          },
          itemStyle: {
            // normal: {
            borderColor: "rgba(147, 235, 248, 1)",
            borderWidth: 1,
            areaColor: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(147, 235, 248, 0.1)", // 地图颜色 处的颜色
                },
              ],
              globalCoord: true, // 缺省为 false
            },
            shadowColor: "rgba(128, 217, 248, 1)",
            // shadowColor: 'rgba(255, 255, 255, 1)',
            shadowOffsetX: -1,
            shadowOffsetY: 2,
            shadowBlur: 10,
            //},
            emphasis: {
              areaColor: "rgba(147, 235, 248, 0.1)",
              borderWidth: 1,
            },
          },
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            symbol: "circle",
            symbolSize: 10,
            showEffectOn: "render",
            rippleEffect: {
              period: 5,
              scale: 5,
              brushType: "fill",
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: function (params) {
                  return levelColorMap[params.value[3]];
                },
                shadowBlur: 5,
                shadowColor: "green",
              },
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "bottom",
                //offset: [0, 0],
                color: "white",
                show: true,
                fontSize: 12, //调节矿点点位数据
              },
            },
            data: mapList.result.find((item) => item.city == "运城市").points,
          },
          {
            type: "lines",
            symbol: ["none", "arrow"],
            zlevel: 2,
            effect: {
              show: mapList.result.find((item) => item.city == "运城市").show,
              period: 10, //箭头指向速度，值越小速度越快
              trailLength: 0.5, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: planePath,
              symbolSize: 50, //调节飞翔目标图标大小
            },
            // lineStyle: {
            //   normal: {
            //     type: "dashed", //solid:实线 dashed：虚线 dotted：圆点
            //     color: "#93E8F8", //线条颜色
            //     width: 2.5, //线条宽度
            //     opacity: 0.5, //尾迹线条透明度
            //     curveness: 0.3, //尾迹线条曲直度
            //   },
            // },
            // data: lineData,
            data: mapList.result.find((item) => item.city == "运城市").lines,
          },
        ],
      };
      //console.log(option);
      myChart.setOption(option);
    });
    window.addEventListener("resize", myChart.resize);
  });
  //#endregion

  //汾河
  //#region 汾河
  $(function () {
    var myChart = echarts.init(document.getElementById("center-one-3"));
    // var planePath = "image://./images/truck.svg";

    // var mapList = {
    //   code: 200,
    //   result: [
    //     //临汾市
    //     {
    //       city: "临汾市",
    //       //点位数据
    //       points: [
    //         {
    //           name: "赵城站",
    //           value: [111.706, 36.3759],
    //         },
    //         {
    //           name: "三交河矿",
    //           value: [111.4307, 36.3937],
    //         },
    //         {
    //           name: "回坡底矿",
    //           value: [111.5315, 36.4478],
    //         },
    //         {
    //           name: "干河矿",
    //           value: [111.5902, 36.4341],
    //         },
    //         {
    //           name: "亿隆煤业",
    //           value: [111.5978, 36.38],
    //         },
    //         {
    //           name: "亿隆洗煤厂",
    //           value: [111.6257, 36.3626],
    //         },
    //         {
    //           name: "龙马站",
    //           value: [111.5744, 36.2609],
    //         },
    //       ],
    //       //路线
    //       lines: [
    //         {
    //           coords: [
    //             [111.706, 36.3759],
    //             [111.4307, 36.3937],
    //           ],
    //           // 统一的样式设置
    //           lineStyle: {
    //             type: "dashed", //solid:实线 dashed：虚线 dotted：圆点
    //             color: "#93E8F8", //线条颜色
    //             width: 2.5, //线条宽度
    //             opacity: 0.5, //尾迹线条透明度
    //             curveness: 0.3, //尾迹线条曲直度
    //           },
    //         },
    //         {
    //           coords: [
    //             [111.5315, 36.4478],
    //             [111.5744, 36.2609],
    //           ],
    //           lineStyle: {
    //             type: "dotted", //solid:实线 dashed：虚线 dotted：圆点
    //             color: "#91cc75", //线条颜色
    //             width: 2.5, //线条宽度
    //             opacity: 0.5, //尾迹线条透明度
    //             curveness: 0.3, //尾迹线条曲直度
    //           },
    //         },
    //       ],
    //       //是否显示线路
    //       show: true,
    //       zoom: 1.3,
    //       //地图位置：
    //       layoutCenter: ["50%", "70%"],
    //       layoutSize: "100%",
    //       name: "汾河公司",
    //       text: "FENHE",
    //     },
    //   ],
    // };
    //https://geo.datav.aliyun.com/areas_v3/bound/141000_full.json
    var linfenshi =
      "https://geo.datav.aliyun.com/areas_v3/bound/141000_full.json";
    $.getJSON(linfenshi, function (geoJson) {
      console.log("发起请求");
      echarts.registerMap("临汾市", geoJson);
      var opt = {
        bgColor: "rgba(255,255,255,0)", // 画布背景色
        mapName: "临汾市",
      };
      var levelColorMap = {
        1: "rgba(241, 109, 115, .8)",
        2: "rgba(255, 235, 59, .7)",
        3: "rgba(147, 235, 248, 1)",
      };
      console.log(opt);
      // 层级索引
      var name = [opt.mapName];

      var idx = 0;
      //地图标题位置
      var pos = {
        leftPlus: 115,
        leftCur: 0,
        left: 50,
        top: 50,
      };

      var line = [
        [0, 0],
        [8, 22],
        [0, 22],
      ];
      // style
      var style = {
        font: '18px "Microsoft YaHei", sans-serif',
        textColor: "#eee",
        lineColor: "rgba(147, 235, 248, .8)",
      };

      var option = {
        backgroundColor: opt.bgColor,
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(12, 204, 104, 0.92)",
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          // formatter: function (params, ticket, callback) {
          //   //根据业务自己拓展要显示的内容
          //   var res = "";
          //   var name = params.name;
          //   var value = params.value;
          //   res =
          //     "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
          //   return res;
          // },
        },
        graphic: [
          {
            type: "group",
            left: pos.left,
            top: pos.top - 4,
            //显示标题下的横线
            children: [
              {
                type: "line", //上横线
                left: 0,
                top: -20,
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 80,
                  y2: 0,
                },
                style: {
                  stroke: style.lineColor,
                },
              },
              {
                type: "line", //下横线
                left: 0,
                top: 20,
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 80,
                  y2: 0,
                },
                style: {
                  stroke: style.lineColor,
                },
              },
            ],
          },
          {
            id: name[idx],
            type: "group",
            left: pos.left + 2,
            top: pos.top,
            children: [
              {
                type: "polyline",
                left: 90,
                top: -12,
                shape: {
                  points: line,
                },
                style: {
                  stroke: "transparent",
                  key: name[0],
                },
                // onclick: function () {
                //   var name = this.style.key;
                //   handleEvents.resetOption(chart, option, name);
                // },
              },
              {
                type: "text",
                left: 0,
                top: "middle",
                style: {
                  text: mapList.result.find((item) => item.city == "临汾市")
                    .name,
                  textAlign: "center",
                  fill: style.textColor,
                  font: style.font,
                },
                // onclick: function () {
                //   handleEvents.resetOption(chart, option, "山西");
                // },
              },
              {
                type: "text",
                left: 0,
                top: 10,
                style: {
                  text: mapList.result.find((item) => item.city == "临汾市")
                    .text,
                  textAlign: "center",
                  fill: style.textColor,
                  //font: '12px "Microsoft YaHei", sans-serif',
                },
                // onclick: function () {
                //   handleEvents.resetOption(chart, option, "山西");
                // },
              },
            ],
          },
        ],
        geo: {
          map: opt.mapName,
          zoom: mapList.result.find((item) => item.city == "临汾市").zoom,
          layoutCenter: mapList.result.find((item) => item.city == "临汾市")
            .layoutCenter,
          layoutSize: mapList.result.find((item) => item.city == "临汾市")
            .layoutSize,
          roam: true,

          label: {
            // normal: {
            //   //显示市级名字
            //   //show: true,
            //   textStyle: {
            //     color: "#fff",
            //   },
            // },
            emphasis: {
              textStyle: {
                color: "rgba(0,0,0,1)",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, 0.1)", // 地图颜色 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -1,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            emphasis: {
              areaColor: "rgba(147, 235, 248, 0.1)",
              borderWidth: 1,
            },
          },
          //   regions: opt.activeArea.map(function (item) {
          //     if (typeof item !== "string") {
          //       return {
          //         name: item.name,
          //         itemStyle: {
          //           normal: {
          //             areaColor: item.areaColor || "#389BB7",
          //           },
          //         },
          //         label: {
          //           normal: {
          //             show: item.showLabel,
          //             textStyle: {
          //               color: "#fff",
          //             },
          //           },
          //         },
          //       };
          //     } else {
          //       return {
          //         name: item,
          //         itemStyle: {
          //           normal: {
          //             borderColor: "#91e6ff",
          //             areaColor: "#389BB7",
          //           },
          //         },
          //       };
          //     }
          //   }),
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            symbol: "circle",
            symbolSize: 10,
            showEffectOn: "render",
            rippleEffect: {
              period: 5,
              scale: 5,
              brushType: "fill",
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: function (params) {
                  return levelColorMap[params.value[3]];
                },
                shadowBlur: 5,
                shadowColor: "green",
              },
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "bottom",
                //offset: [0, 0],
                color: "white",
                show: true,
                fontSize: 12, //调节矿点点位数据
              },
            },
            data: mapList.result.find((item) => item.city == "临汾市").points,
          },
          {
            type: "lines",
            symbol: ["none", "arrow"],
            zlevel: 2,
            effect: {
              show: mapList.result.find((item) => item.city == "临汾市").show,
              period: 10, //箭头指向速度，值越小速度越快
              trailLength: 0.5, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: planePath,
              symbolSize: 50, //调节飞翔目标图标大小
            },
            // lineStyle: {
            //   normal: {
            //     type: "dashed", //solid:实线 dashed：虚线 dotted：圆点
            //     color: "#93E8F8", //线条颜色
            //     width: 2.5, //线条宽度
            //     opacity: 0.5, //尾迹线条透明度
            //     curveness: 0.3, //尾迹线条曲直度
            //   },
            // },
            // data: lineData,
            data: mapList.result.find((item) => item.city == "临汾市").lines,
          },
        ],
      };
      //console.log(option);
      myChart.setOption(option);
    });

    //=============== end ===============//

    // 使用刚指定的配置项和数据显示图表。
    // if (option && typeof option === "object") {
    //   myChart.setOption(option);
    // }
    window.addEventListener("resize", myChart.resize);
  });
  //#endregion

  //晋北
  //#region 晋北
  $(function () {
    var myChart = echarts.init(document.getElementById("right-one-3"));
    //var planePath = "image://./images/truck.svg";

    // var mapList = {
    //   code: 200,
    //   result: [
    //     // //忻州市
    //     {
    //       city: "忻州市",
    //       //点位数据
    //       points: [
    //         {
    //           name: "晋北煤业",
    //           value: [112.0039, 38.2872],
    //         },
    //         {
    //           name: "晋北洗煤厂",
    //           value: [112.0008, 38.3636],
    //         },
    //         {
    //           name: "汾源煤业",
    //           value: [112.1116, 38.4922],
    //         },
    //         {
    //           name: "汾源洗煤厂",
    //           value: [112.1108, 38.5883],
    //         },
    //         {
    //           name: "金能煤业",
    //           value: [112.0365, 38.4098],
    //         },
    //       ],
    //       //路线
    //       lines: [
    //         {
    //           coords: [
    //             [112.0039, 38.2872],
    //             [112.1116, 38.4922],
    //           ],
    //           // 统一的样式设置
    //           lineStyle: {
    //             type: "dashed", //solid:实线 dashed：虚线 dotted：圆点
    //             color: "#93E8F8", //线条颜色
    //             width: 2.5, //线条宽度
    //             opacity: 0.5, //尾迹线条透明度
    //             curveness: 0.8, //尾迹线条曲直度
    //           },
    //         },
    //         {
    //           coords: [
    //             [112.0008, 38.3636],
    //             [112.1108, 38.5883],
    //           ],
    //           lineStyle: {
    //             type: "dotted", //solid:实线 dashed：虚线 dotted：圆点
    //             color: "#91cc75", //线条颜色
    //             width: 2.5, //线条宽度
    //             opacity: 0.5, //尾迹线条透明度
    //             curveness: 0.8, //尾迹线条曲直度
    //           },
    //         },
    //       ],
    //       //是否显示线路
    //       show: true,
    //       zoom: 2,
    //       //地图位置：
    //       layoutCenter: ["50%", "50%"],
    //       layoutSize: "80%",
    //       name: "晋北公司",
    //       text: "JINBEI",
    //     },
    //   ],
    // };

    var jinglexian = "https://geo.datav.aliyun.com/areas_v3/bound/140926.json";
    $.getJSON(jinglexian, function (geoJson) {
      console.log("发起请求");
      echarts.registerMap("静乐县", geoJson);
      var opt = {
        bgColor: "rgba(255,255,255,0)", // 画布背景色
        mapName: "静乐县",
      };
      var levelColorMap = {
        1: "rgba(241, 109, 115, .8)",
        2: "rgba(255, 235, 59, .7)",
        3: "rgba(147, 235, 248, 1)",
      };
      console.log(opt);
      // 层级索引
      var name = [opt.mapName];

      var idx = 0;
      //地图标题位置
      var pos = {
        leftPlus: 115,
        leftCur: 0,
        left: 50,
        top: 50,
      };

      var line = [
        [0, 0],
        [8, 22],
        [0, 22],
      ];
      // style
      var style = {
        font: '18px "Microsoft YaHei", sans-serif',
        textColor: "#eee",
        lineColor: "rgba(147, 235, 248, .8)",
      };

      var option = {
        backgroundColor: opt.bgColor,
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(12, 204, 104, 0.92)",
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          // formatter: function (params, ticket, callback) {
          //   //根据业务自己拓展要显示的内容
          //   var res = "";
          //   var name = params.name;
          //   var value = params.value;
          //   res =
          //     "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
          //   return res;
          // },
        },
        graphic: [
          {
            type: "group",
            left: pos.left,
            top: pos.top - 4,
            //显示标题下的横线
            children: [
              {
                type: "line", //上横线
                left: 0,
                top: -20,
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 80,
                  y2: 0,
                },
                style: {
                  stroke: style.lineColor,
                },
              },
              {
                type: "line", //下横线
                left: 0,
                top: 20,
                shape: {
                  x1: 0,
                  y1: 0,
                  x2: 80,
                  y2: 0,
                },
                style: {
                  stroke: style.lineColor,
                },
              },
            ],
          },
          {
            id: name[idx],
            type: "group",
            left: pos.left + 2,
            top: pos.top,
            children: [
              {
                type: "polyline",
                left: 90,
                top: -12,
                shape: {
                  points: line,
                },
                style: {
                  stroke: "transparent",
                  key: name[0],
                },
                // onclick: function () {
                //   var name = this.style.key;
                //   handleEvents.resetOption(chart, option, name);
                // },
              },
              {
                type: "text",
                left: 0,
                top: "middle",
                style: {
                  text: mapList.result.find((item) => item.city == "忻州市")
                    .name,
                  textAlign: "center",
                  fill: style.textColor,
                  font: style.font,
                },
                // onclick: function () {
                //   handleEvents.resetOption(chart, option, "山西");
                // },
              },
              {
                type: "text",
                left: 0,
                top: 10,
                style: {
                  text: mapList.result.find((item) => item.city == "忻州市")
                    .text,
                  textAlign: "center",
                  fill: style.textColor,
                  //font: '12px "Microsoft YaHei", sans-serif',
                },
                // onclick: function () {
                //   handleEvents.resetOption(chart, option, "山西");
                // },
              },
            ],
          },
        ],
        geo: {
          map: opt.mapName,
          zoom: mapList.result.find((item) => item.city == "忻州市").zoom,
          layoutCenter: mapList.result.find((item) => item.city == "忻州市")
            .layoutCenter,
          layoutSize: mapList.result.find((item) => item.city == "忻州市")
            .layoutSize,
          roam: true,

          label: {
            // normal: {
            //   //显示市级名字
            //   //show: true,
            //   textStyle: {
            //     color: "#fff",
            //   },
            // },
            emphasis: {
              textStyle: {
                color: "rgba(0,0,0,1)",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, 0.1)", // 地图颜色 处的颜色
                  },
                ],
                globalCoord: true, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -1,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            emphasis: {
              areaColor: "rgba(147, 235, 248, 0.1)",
              borderWidth: 1,
            },
          },
          //   regions: opt.activeArea.map(function (item) {
          //     if (typeof item !== "string") {
          //       return {
          //         name: item.name,
          //         itemStyle: {
          //           normal: {
          //             areaColor: item.areaColor || "#389BB7",
          //           },
          //         },
          //         label: {
          //           normal: {
          //             show: item.showLabel,
          //             textStyle: {
          //               color: "#fff",
          //             },
          //           },
          //         },
          //       };
          //     } else {
          //       return {
          //         name: item,
          //         itemStyle: {
          //           normal: {
          //             borderColor: "#91e6ff",
          //             areaColor: "#389BB7",
          //           },
          //         },
          //       };
          //     }
          //   }),
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            symbol: "circle",
            symbolSize: 10,
            showEffectOn: "render",
            rippleEffect: {
              period: 5,
              scale: 5,
              brushType: "fill",
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: function (params) {
                  return levelColorMap[params.value[3]];
                },
                shadowBlur: 5,
                shadowColor: "green",
              },
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "bottom",
                //offset: [0, 0],
                color: "white",
                show: true,
                fontSize: 12, //调节矿点点位数据
              },
            },
            data: mapList.result.find((item) => item.city == "忻州市").points,
          },
          {
            type: "lines",
            symbol: ["none", "arrow"],
            zlevel: 2,
            effect: {
              show: mapList.result.find((item) => item.city == "忻州市").show,
              period: 10, //箭头指向速度，值越小速度越快
              trailLength: 0.5, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: planePath,
              symbolSize: 50, //调节飞翔目标图标大小
            },
            // lineStyle: {
            //   normal: {
            //     type: "dashed", //solid:实线 dashed：虚线 dotted：圆点
            //     color: "#93E8F8", //线条颜色
            //     width: 2.5, //线条宽度
            //     opacity: 0.5, //尾迹线条透明度
            //     curveness: 0.3, //尾迹线条曲直度
            //   },
            // },
            // data: lineData,
            data: mapList.result.find((item) => item.city == "忻州市").lines,
          },
        ],
      };
      //console.log(option);
      myChart.setOption(option);
    });

    //=============== end ===============//

    // 使用刚指定的配置项和数据显示图表。
    // if (option && typeof option === "object") {
    //   myChart.setOption(option);
    // }
    window.addEventListener("resize", myChart.resize);
  });
  //#endregion
}

//实时内调
function showInner() {
  // var allRegions;
  // $.ajax({
  //   type: "get", // 请求方式
  //   url: "http://localhost:8081/dzwz/organize/selectRegions", // 请求路径
  //   dataType: "json", // 预期返回一个 json 类型数据
  //   success: function (data) {
  //     // data是形参名，代表返回的数据
  //     allRegions = data.data;
  //     console.log(allRegions);
  //   },
  // });
  $.ajax({
    type: "get", // 请求方式
    url: "http://localhost:8081/dzwz/inner/showMonthData", // 请求路径
    dataType: "json", // 预期返回一个 json 类型数据
    success: function (data) {
      // data是形参名，代表返回的数据
      // const map = new Map(Object.entries(data.data));
      // console.log(map.get(allRegions[0].ucml_OrganizeOID));
      console.log(data);
      var rdata = data.rdata;
      var tdata = data.tdata;
      initBenInnerData(rdata[0]);
      initFhInnerData(rdata[1]);
      initHdInnerData(rdata[8]);
      initJnInnerData(rdata[2]);
      initJbInnerData(rdata[3]);
      initWjzInnerData(rdata[10]);
      initCurrentInnerData(tdata);
    },
  });
  //集团本部内调
  function initBenInnerData(benData) {
    var myChart = echarts.init(document.getElementById("left-one-4"));

    var colors = benData.colors;
    var seriesData = [];
    benData.names.forEach((item, index) => {
      seriesData.push({
        name: item,
        type: "line",
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            //{ type: "min", name: "最小值" },
          ],
          // 自定义标记的样式
          itemStyle: {
            color: "rgba(0,0,0,0.3)", // 点的颜色
          },
          label: {
            show: true, // 是否显示数值
            // formatter: function (param) {
            //   return param.value + " 单位"; // 自定义显示格式
            // },
          },
        },
        //smooth: true,
        symbol: "circle",
        symbolSize: 1,
        color: benData.colors[index],
        data: benData.result[index],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors[index],
            },
            {
              offset: 1,
              color: "rgba(0, 173, 253, 0)",
            },
          ]),
        },
      });
    });
    option = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "35%",
        right: "6%",
        left: "8%",
        bottom: "10%",
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff",
        },
        data: benData.names,
      },
      xAxis: [
        {
          name: "日",
          type: "category",
          data: benData.xdata,
          boundaryGap: true, //x轴顶头显示
          axisLine: {
            show: true, //隐藏X轴轴线
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
          },
        },
      ],
      yAxis: [
        {
          name: "吨",
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true, //隐藏X轴轴线
            //坐标轴箭头
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
            formatter: (params) => {
              return params + "";
            },
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
    window.addEventListener("resize", myChart.resize);
  }
  //汾河公司内调
  function initFhInnerData(fhData) {
    var myChart = echarts.init(document.getElementById("left-two-4"));
    var colors = fhData.colors;
    var seriesData = [];
    fhData.names.forEach((item, index) => {
      seriesData.push({
        name: item,
        type: "line",
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            //{ type: "min", name: "最小值" },
          ],
          // 自定义标记的样式
          itemStyle: {
            color: "rgba(0,0,0,0.3)", // 点的颜色
          },
          label: {
            show: true, // 是否显示数值
            // formatter: function (param) {
            //   return param.value + " 单位"; // 自定义显示格式
            // },
          },
        },
        //smooth: true,
        symbol: "circle",
        symbolSize: 1,
        color: fhData.colors[index],
        data: fhData.result[index],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors[index],
            },
            {
              offset: 1,
              color: "rgba(0, 173, 253, 0)",
            },
          ]),
        },
      });
    });
    option = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "35%",
        right: "6%",
        left: "10%",
        bottom: "10%",
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff",
        },
        data: fhData.names,
      },
      xAxis: [
        {
          name: "日",
          type: "category",
          data: fhData.xdata,
          boundaryGap: true, //x轴顶头显示
          axisLine: {
            show: true, //隐藏X轴轴线
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
          },
        },
      ],
      yAxis: [
        {
          name: "吨",
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true, //隐藏X轴轴线
            //坐标轴箭头
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
            formatter: (params) => {
              return params + "";
            },
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
    window.addEventListener("resize", myChart.resize);
  }
  //宏大公司内调
  function initHdInnerData(hdData) {
    var myChart = echarts.init(document.getElementById("left-three-4"));
    var colors = hdData.colors;
    var seriesData = [];
    hdData.names.forEach((item, index) => {
      seriesData.push({
        name: item,
        type: "line",
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            //{ type: "min", name: "最小值" },
          ],
          // 自定义标记的样式
          itemStyle: {
            color: "rgba(0,0,0,0.3)", // 点的颜色
          },
          label: {
            show: true, // 是否显示数值
            // formatter: function (param) {
            //   return param.value + " 单位"; // 自定义显示格式
            // },
          },
        },
        //显示折线为直线
        //smooth: true,
        symbol: "circle",
        symbolSize: 1,
        color: hdData.colors[index],
        data: hdData.result[index],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors[index],
            },
            {
              offset: 1,
              color: "rgba(0, 173, 253, 0)",
            },
          ]),
        },
      });
    });
    option = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "35%",
        right: "6%",
        left: "10%",
        bottom: "10%",
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff",
        },
        data: hdData.names,
      },
      xAxis: [
        {
          name: "日",
          type: "category",
          data: hdData.xdata,
          boundaryGap: true, //x轴顶头显示
          axisLine: {
            show: true, //隐藏X轴轴线
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
          },
        },
      ],
      yAxis: [
        {
          name: "吨",
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true, //隐藏X轴轴线
            //坐标轴箭头
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
            formatter: (params) => {
              return params + "";
            },
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
    window.addEventListener("resize", myChart.resize);
  }
  //晋南公司原煤内调
  function initJnInnerData(jnData) {
    var myChart = echarts.init(document.getElementById("right-one-4"));
    var colors = jnData.colors;
    var seriesData = [];
    jnData.names.forEach((item, index) => {
      seriesData.push({
        name: item,
        type: "line",
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            //{ type: "min", name: "最小值" },
          ],
          // 自定义标记的样式
          itemStyle: {
            color: "rgba(0,0,0,0.3)", // 点的颜色
          },
          label: {
            show: true, // 是否显示数值
            // formatter: function (param) {
            //   return param.value + " 单位"; // 自定义显示格式
            // },
          },
        },
        //smooth: true,
        symbol: "circle",
        symbolSize: 1,
        color: jnData.colors[index],
        data: jnData.result[index],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors[index],
            },
            {
              offset: 1,
              color: "rgba(0, 173, 253, 0)",
            },
          ]),
        },
      });
    });
    option = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "35%",
        right: "6%",
        left: "10%",
        bottom: "10%",
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff",
        },
        data: jnData.names,
      },
      xAxis: [
        {
          name: "日",
          type: "category",
          data: jnData.xdata,
          boundaryGap: true, //x轴顶头显示
          axisLine: {
            show: true, //隐藏X轴轴线
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
          },
        },
      ],
      yAxis: [
        {
          name: "吨",
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true, //隐藏X轴轴线
            //坐标轴箭头
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
            formatter: (params) => {
              return params + "";
            },
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
    window.addEventListener("resize", myChart.resize);
  }

  //晋北公司原煤内调
  function initJbInnerData(jbData) {
    var myChart = echarts.init(document.getElementById("right-two-4"));
    var colors = jbData.colors;
    var seriesData = [];
    jbData.names.forEach((item, index) => {
      seriesData.push({
        name: item,
        type: "line",
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            //{ type: "min", name: "最小值" },
          ],
          // 自定义标记的样式
          itemStyle: {
            color: "rgba(0,0,0,0.3)", // 点的颜色
          },
          label: {
            show: true, // 是否显示数值
            // formatter: function (param) {
            //   return param.value + " 单位"; // 自定义显示格式
            // },
          },
        },
        //smooth: true,
        symbol: "circle",
        symbolSize: 1,
        color: jbData.colors[index],
        data: jbData.result[index],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors[index],
            },
            {
              offset: 1,
              color: "rgba(0, 173, 253, 0)",
            },
          ]),
        },
      });
    });
    option = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "35%",
        right: "6%",
        left: "10%",
        bottom: "10%",
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff",
        },
        data: jbData.names,
      },
      xAxis: [
        {
          name: "日",
          type: "category",
          data: jbData.xdata,
          boundaryGap: true, //x轴顶头显示
          axisLine: {
            show: true, //隐藏X轴轴线
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
          },
        },
      ],
      yAxis: [
        {
          name: "吨",
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true, //隐藏X轴轴线
            //坐标轴箭头
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
            formatter: (params) => {
              return params + "";
            },
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
    window.addEventListener("resize", myChart.resize);
  }

  //万家庄公司原煤内调
  function initWjzInnerData(wjzData) {
    var myChart = echarts.init(document.getElementById("right-three-4"));
    var colors = wjzData.colors;
    var seriesData = [];
    wjzData.names.forEach((item, index) => {
      seriesData.push({
        name: item,
        type: "line",
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            //{ type: "min", name: "最小值" },
          ],
          // 自定义标记的样式
          itemStyle: {
            color: "rgba(0,0,0,0.3)", // 点的颜色
          },
          label: {
            show: true, // 是否显示数值
            // formatter: function (param) {
            //   return param.value + " 单位"; // 自定义显示格式
            // },
          },
        },
        //smooth: true,
        symbol: "circle",
        symbolSize: 1,
        color: wjzData.colors[index],
        data: wjzData.result[index],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors[index],
            },
            {
              offset: 1,
              color: "rgba(0, 173, 253, 0)",
            },
          ]),
        },
      });
    });
    option = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "35%",
        right: "6%",
        left: "10%",
        bottom: "10%",
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff",
        },
        data: wjzData.names,
      },
      xAxis: [
        {
          name: "日",
          type: "category",
          data: wjzData.xdata,
          boundaryGap: true, //x轴顶头显示
          axisLine: {
            show: true, //隐藏X轴轴线
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
          },
        },
      ],
      yAxis: [
        {
          name: "吨",
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true, //隐藏X轴轴线
            //坐标轴箭头
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
            formatter: (params) => {
              return params + "";
            },
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
    window.addEventListener("resize", myChart.resize);
  }

  var socket = new SockJS("http://localhost:8081/dzwzws");

  var stompClient = Stomp.over(socket);
  stompClient.connect({}, function (frame) {
    //console.log("Connected: " + frame);
    stompClient.subscribe("/screen/inner", function (data) {
      console.log("实时内调：");
      console.log(JSON.parse(data.body));
      //$(".no").find("ul").empty();
      initCurrentInnerData(JSON.parse(data.body));
    });
  });
  //数据横屏展示
  function initCurrentInnerData(dayData) {
    $('[id^="center-one-4-"').each(function () {
      $(this).empty();
    });
    dayData.slice(0, 4).forEach((item) => {
      $("#center-one-4-1").append($("<li>").text(item.name));
      $("#center-one-4-2").append($("<li>").text(item.value));
    });
    dayData.slice(4, 8).forEach((item) => {
      $("#center-one-4-3").append($("<li>").text(item.name));
      $("#center-one-4-4").append($("<li>").text(item.value));
    });
  }
  // $(function () {
  //   // $.ajax({
  //   //   type: "get", // 请求方式
  //   //   url: "http://localhost:8081/dzwz/inner/showRefreshTotal", // 请求路径
  //   //   dataType: "json", // 预期返回一个 json 类型数据
  //   //   success: function (data) {
  //   //     // data是形参名，代表返回的数据
  //   //     console.log(data);
  //   //     resetTotalData(data);
  //   //   },
  //   // });

  // });

  //行业政策
}

//实时销售界面
function showSales() {
  $.ajax({
    type: "get", // 请求方式
    url: "http://localhost:8081/dzwz/sale/showMonthData", // 请求路径
    dataType: "json", // 预期返回一个 json 类型数据
    success: function (data) {
      // data是形参名，代表返回的数据
      // const map = new Map(Object.entries(data.data));
      // console.log(map.get(allRegions[0].ucml_OrganizeOID));
      console.log(data);
      var rdata = data.rdata;
      var tdata = data.tdata;
      initBenSaleData(rdata[0]);
      // initFhSaleData(rdata[1]);
      // //resetTotalrdata(data);
      // resetHdData(rdata[8]);
      // resetJnData(rdata[2]);
      // resetJbData(rdata[3]);
      // resetWjzData(rdata[10]);
      initCurrentSaleData(tdata);
    },
  });
  //集团本部销售
  function initBenSaleData(benData) {
    var myChart = echarts.init(document.getElementById("left-one-5"));

    var colors = benData.colors;
    var localData = benData;
    var seriesData = [];
    localData.names.forEach((item, index) => {
      seriesData.push({
        name: item,
        type: "line",
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            //{ type: "min", name: "最小值" },
          ],
          // 自定义标记的样式
          itemStyle: {
            color: "rgba(0,0,0,0.5)", // 点的颜色
          },
          label: {
            show: true, // 是否显示数值
            // formatter: function (param) {
            //   return param.value + " 单位"; // 自定义显示格式
            // },
          },
        },
        //smooth: true,
        symbol: "circle",
        symbolSize: 2,
        color: localData.colors[index],
        data: localData.result[index],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors[index],
            },
            {
              offset: 1,
              color: "rgba(0, 173, 253, 0)",
            },
          ]),
        },
      });
    });
    option = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "20%",
        right: "6%",
        left: "8%",
        bottom: "10%",
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff",
        },
        data: localData.names,
      },
      xAxis: [
        {
          name: "日",
          type: "category",
          data: localData.xdata,
          boundaryGap: true, //x轴顶头显示
          axisLine: {
            show: true, //隐藏X轴轴线
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
          },
        },
      ],
      yAxis: [
        {
          name: "吨",
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true, //隐藏X轴轴线
            //坐标轴箭头
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
            formatter: (params) => {
              return params + "";
            },
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
    window.addEventListener("resize", myChart.resize);
  }

  //汾河公司销售
  $(function () {
    var myChart = echarts.init(document.getElementById("left-two-5"));
    const data = [
      {
        dateStr: "1",
        totalVolume: 0,
        supplyVolume: 0,
        permitVolume: 0,
      },
      {
        dateStr: "2",
        totalVolume: 0,
        supplyVolume: 0,
        permitVolume: 0,
      },
      {
        dateStr: "3",
        totalVolume: 0,
        supplyVolume: 0,
        permitVolume: 0,
      },
      {
        dateStr: "4",
        totalVolume: 0,
        supplyVolume: 0,
        permitVolume: 0,
      },
      {
        dateStr: "5",
        totalVolume: 0,
        supplyVolume: 0,
        permitVolume: 0,
      },
      {
        dateStr: "6",
        totalVolume: 0,
        supplyVolume: 0,
        permitVolume: 0,
      },
      {
        dateStr: "7",
        totalVolume: 0,
        supplyVolume: 0,
        permitVolume: 0,
      },
      {
        dateStr: "8",
        totalVolume: 0,
        supplyVolume: 0,
        permitVolume: 0,
      },
      {
        dateStr: "9",
        totalVolume: 0,
        supplyVolume: 0,
        permitVolume: 0,
      },
    ];
    var xAxisData = [],
      yAxisTotalData = [],
      yAxisWaterWorks = [],
      yAxisOwned = [];
    for (var i = 0; i < data.length; i++) {
      xAxisData.push(data[i].dateStr);
      yAxisTotalData.push(data[i].totalVolume.toFixed(2));
      yAxisWaterWorks.push(data[i].supplyVolume.toFixed(2));
      yAxisOwned.push(data[i].permitVolume.toFixed(2));
    }
    var colors = ["#00CC99", "#33CCFF", "#9933FF"];

    var datas = ["吕临能化", "店坪煤矿", "木瓜煤矿"];
    var totalData = [yAxisTotalData, yAxisWaterWorks, yAxisOwned];
    var seriesData = [];
    datas.forEach((item, index) => {
      seriesData.push({
        name: item,
        type: "line",
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            //{ type: "min", name: "最小值" },
          ],
          // 自定义标记的样式
          itemStyle: {
            color: "rgba(0,0,0,0.5)", // 点的颜色
          },
          label: {
            show: true, // 是否显示数值
            // formatter: function (param) {
            //   return param.value + " 单位"; // 自定义显示格式
            // },
          },
        },
        smooth: true,
        symbol: "circle",
        symbolSize: 2,
        color: colors[index],
        data: totalData[index],
        //去掉渐变色
        // areaStyle: {
        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //     {
        //       offset: 0,
        //       color: colors[index],
        //     },
        //     {
        //       offset: 1,
        //       color: "rgba(0, 173, 253, 0)",
        //     },
        //   ]),
        // },
      });
    });
    option = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "20%",
        right: "6%",
        left: "10%",
        bottom: "10%",
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff",
        },
        data: datas,
      },
      xAxis: [
        {
          name: "日",
          type: "category",
          data: xAxisData,
          boundaryGap: true, //x轴顶头显示
          axisLine: {
            show: true, //隐藏X轴轴线
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
          },
        },
      ],
      yAxis: [
        {
          //name: "万m³",
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            //show: true, //隐藏X轴轴线
            //坐标轴箭头
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
            formatter: (params) => {
              return params + "";
            },
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
    window.addEventListener("resize", myChart.resize);
  });

  //宏大公司销售
  $(function () {
    var myChart = echarts.init(document.getElementById("left-three-5"));
    const data = [
      {
        dateStr: "1",
        totalVolume: 1423,
        supplyVolume: 235,
        permitVolume: 847,
      },
      {
        dateStr: "2",
        totalVolume: 1023,
        supplyVolume: 335,
        permitVolume: 547,
      },
      {
        dateStr: "3",
        totalVolume: 1123,
        supplyVolume: 535,
        permitVolume: 647,
      },
      {
        dateStr: "4",
        totalVolume: 4970,
        supplyVolume: 235,
        permitVolume: 847,
      },
      {
        dateStr: "5",
        totalVolume: 1223,
        supplyVolume: 4674,
        permitVolume: 247,
      },
      {
        dateStr: "6",
        totalVolume: 1023,
        supplyVolume: 235,
        permitVolume: 847,
      },
    ];
    var yAxisTotalData = [],
      yAxisWaterWorks = [],
      yAxisOwned = [];
    for (var i = 0; i < data.length; i++) {
      yAxisTotalData.push(data[i].totalVolume.toFixed(2));
      yAxisWaterWorks.push(data[i].supplyVolume.toFixed(2));
      yAxisOwned.push(data[i].permitVolume.toFixed(2));
    }
    var colors = ["#00CC99", "#33CCFF", "#9933FF"];

    var names = ["腾晖原煤", "薛虎沟原煤", "杜家沟原煤"];
    var totalData = [yAxisTotalData, yAxisWaterWorks, yAxisOwned];

    const companyList = {
      names: names,
      colors: colors,
      xdata: ["1", "2", "3", "4", "5", "6"],
      totalData: totalData,
    };
    var seriesData = [];
    companyList.names.forEach((item, index) => {
      seriesData.push({
        name: item,
        type: "line",
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            //{ type: "min", name: "最小值" },
          ],
          // 自定义标记的样式
          itemStyle: {
            color: "rgba(0,0,0,0.5)", // 点的颜色
          },
          label: {
            show: true, // 是否显示数值
            // formatter: function (param) {
            //   return param.value + " 单位"; // 自定义显示格式
            // },
          },
        },
        smooth: true,
        symbol: "circle",
        symbolSize: 4,
        color: companyList.colors[index],
        data: companyList.totalData[index],
        //去掉渐变色
        // areaStyle: {
        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //     {
        //       offset: 0,
        //       color: colors[index],
        //     },
        //     {
        //       offset: 1,
        //       color: "rgba(0, 173, 253, 0)",
        //     },
        //   ]),
        // },
      });
    });
    option = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "20%",
        right: "6%",
        left: "10%",
        bottom: "10%",
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff",
        },
        data: companyList.names,
      },
      xAxis: [
        {
          name: "日",
          type: "category",
          data: companyList.xdata,
          boundaryGap: true, //x轴顶头显示
          axisLine: {
            show: true, //隐藏X轴轴线
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
          },
        },
      ],
      yAxis: [
        {
          //name: "万m³",
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            //show: true, //隐藏X轴轴线
            //坐标轴箭头
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
            formatter: (params) => {
              return params + "";
            },
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
    window.addEventListener("resize", myChart.resize);
  });

  //晋南公司销售
  $(function () {
    var myChart = echarts.init(document.getElementById("right-one-5"));
    const data = [
      {
        dateStr: "1",
        totalVolume: 1423,
        supplyVolume: 235,
        permitVolume: 847,
      },
      {
        dateStr: "2",
        totalVolume: 1023,
        supplyVolume: 335,
        permitVolume: 547,
      },
      {
        dateStr: "3",
        totalVolume: 1123,
        supplyVolume: 535,
        permitVolume: 647,
      },
      {
        dateStr: "4",
        totalVolume: 1823,
        supplyVolume: 235,
        permitVolume: 847,
      },
      {
        dateStr: "5",
        totalVolume: 1223,
        supplyVolume: 835,
        permitVolume: 247,
      },
      {
        dateStr: "6",
        totalVolume: 1023,
        supplyVolume: 235,
        permitVolume: 847,
      },
      {
        dateStr: "7",
        totalVolume: 1823,
        supplyVolume: 235,
        permitVolume: 847,
      },
      {
        dateStr: "8",
        totalVolume: 1223,
        supplyVolume: 835,
        permitVolume: 247,
      },
      {
        dateStr: "9",
        totalVolume: 1023,
        supplyVolume: 235,
        permitVolume: 847,
      },
    ];
    var xAxisData = [],
      yAxisTotalData = [],
      yAxisWaterWorks = [],
      yAxisOwned = [];
    for (var i = 0; i < data.length; i++) {
      xAxisData.push(data[i].dateStr);
      yAxisTotalData.push(data[i].totalVolume.toFixed(2));
      yAxisWaterWorks.push(data[i].supplyVolume.toFixed(2));
      yAxisOwned.push(data[i].permitVolume.toFixed(2));
    }
    var colors = ["#00CC99", "#33CCFF", "#9933FF"];

    var datas = ["三交河", "龙马站", "回坡底"];
    var totalData = [yAxisTotalData, yAxisWaterWorks, yAxisOwned];
    var seriesData = [];
    datas.forEach((item, index) => {
      seriesData.push({
        name: item,
        type: "line",
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            //{ type: "min", name: "最小值" },
          ],
          // 自定义标记的样式
          itemStyle: {
            color: "rgba(0,0,0,0.5)", // 点的颜色
          },
          label: {
            show: true, // 是否显示数值
            // formatter: function (param) {
            //   return param.value + " 单位"; // 自定义显示格式
            // },
          },
        },
        smooth: true,
        symbol: "circle",
        symbolSize: 2,
        color: colors[index],
        data: totalData[index],
        //去掉渐变色
        // areaStyle: {
        //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //     {
        //       offset: 0,
        //       color: colors[index],
        //     },
        //     {
        //       offset: 1,
        //       color: "rgba(0, 173, 253, 0)",
        //     },
        //   ]),
        // },
      });
    });
    option = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "20%",
        right: "6%",
        left: "10%",
        bottom: "10%",
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff",
        },
        data: datas,
      },
      xAxis: [
        {
          name: "日",
          type: "category",
          data: xAxisData,
          boundaryGap: true, //x轴顶头显示
          axisLine: {
            show: true, //隐藏X轴轴线
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
          },
        },
      ],
      yAxis: [
        {
          //name: "万m³",
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            //show: true, //隐藏X轴轴线
            //坐标轴箭头
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
            formatter: (params) => {
              return params + "";
            },
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
    window.addEventListener("resize", myChart.resize);
  });
  //晋北公司销售
  $(function () {
    var myChart = echarts.init(document.getElementById("right-two-5"));
    const data = [
      {
        dateStr: "1",
        totalVolume: 1423,
        supplyVolume: 0,
        permitVolume: 847,
      },
      {
        dateStr: "2",
        totalVolume: 1023,
        supplyVolume: 0,
        permitVolume: 547,
      },
      {
        dateStr: "3",
        totalVolume: 1123,
        supplyVolume: 0,
        permitVolume: 647,
      },
      {
        dateStr: "4",
        totalVolume: 1823,
        supplyVolume: 0,
        permitVolume: 847,
      },
      {
        dateStr: "5",
        totalVolume: 1223,
        supplyVolume: 0,
        permitVolume: 247,
      },
      {
        dateStr: "6",
        totalVolume: 1023,
        supplyVolume: 0,
        permitVolume: 847,
      },
      {
        dateStr: "7",
        totalVolume: 1823,
        supplyVolume: 0,
        permitVolume: 3734,
      },
      {
        dateStr: "8",
        totalVolume: 1223,
        supplyVolume: 0,
        permitVolume: 247,
      },
      {
        dateStr: "9",
        totalVolume: 1023,
        supplyVolume: 0,
        permitVolume: 847,
      },
    ];
    var xAxisData = [],
      yAxisTotalData = [],
      yAxisWaterWorks = [],
      yAxisOwned = [];
    for (var i = 0; i < data.length; i++) {
      xAxisData.push(data[i].dateStr);
      yAxisTotalData.push(data[i].totalVolume.toFixed(2));
      yAxisWaterWorks.push(data[i].supplyVolume.toFixed(2));
      yAxisOwned.push(data[i].permitVolume.toFixed(2));
    }
    var colors = ["#00CC99", "#9933FF", "#33CCFF"];

    var datas = ["晋北原煤", "汾源原煤", "金能原煤"];
    var totalData = [yAxisTotalData, yAxisWaterWorks, yAxisOwned];
    var seriesData = [];
    datas.forEach((item, index) => {
      seriesData.push({
        name: item,
        type: "line",
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            //{ type: "min", name: "最小值" },
          ],
          // 自定义标记的样式
          itemStyle: {
            color: "rgba(0,0,0,0.5)", // 点的颜色
          },
          label: {
            show: true, // 是否显示数值
            // formatter: function (param) {
            //   return param.value + " 单位"; // 自定义显示格式
            // },
          },
        },
        smooth: true,
        symbol: "circle",
        symbolSize: 2,
        color: colors[index],
        data: totalData[index],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors[index],
            },
            {
              offset: 1,
              color: "rgba(0, 173, 253, 0)",
            },
          ]),
        },
      });
    });
    option = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "20%",
        right: "6%",
        left: "10%",
        bottom: "10%",
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff",
        },
        data: datas,
      },
      xAxis: [
        {
          name: "日",
          type: "category",
          data: xAxisData,
          boundaryGap: true, //x轴顶头显示
          axisLine: {
            show: true, //隐藏X轴轴线
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
          },
        },
      ],
      yAxis: [
        {
          //name: "万m³",
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            //show: true, //隐藏X轴轴线
            //坐标轴箭头
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
            formatter: (params) => {
              return params + "";
            },
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
    window.addEventListener("resize", myChart.resize);
  });

  //万家庄销售
  $(function () {
    var myChart = echarts.init(document.getElementById("right-three-5"));
    const data = [
      {
        dateStr: "1",
        totalVolume: 1423,
        supplyVolume: 235,
        permitVolume: 847,
      },
      {
        dateStr: "2",
        totalVolume: 1023,
        supplyVolume: 335,
        permitVolume: 547,
      },
      {
        dateStr: "3",
        totalVolume: 1123,
        supplyVolume: 535,
        permitVolume: 647,
      },
      {
        dateStr: "4",
        totalVolume: 1823,
        supplyVolume: 235,
        permitVolume: 847,
      },
      {
        dateStr: "5",
        totalVolume: 1223,
        supplyVolume: 835,
        permitVolume: 247,
      },
      {
        dateStr: "6",
        totalVolume: 1023,
        supplyVolume: 1200,
        permitVolume: 847,
      },
      {
        dateStr: "7",
        totalVolume: 1823,
        supplyVolume: 235,
        permitVolume: 1089,
      },
      {
        dateStr: "8",
        totalVolume: 1223,
        supplyVolume: 835,
        permitVolume: 247,
      },
      {
        dateStr: "9",
        totalVolume: 1023,
        supplyVolume: 235,
        permitVolume: 847,
      },
    ];
    var xAxisData = [],
      yAxisTotalData = [],
      yAxisWaterWorks = [],
      yAxisOwned = [];
    for (var i = 0; i < data.length; i++) {
      xAxisData.push(data[i].dateStr);
      yAxisTotalData.push(data[i].totalVolume.toFixed(2));
      yAxisWaterWorks.push(data[i].supplyVolume.toFixed(2));
      yAxisOwned.push(data[i].permitVolume.toFixed(2));
    }
    var colors = ["#00CC99", "#33CCFF", "#9933FF"];

    var datas = ["锦程原煤", "洪崖原煤", "雪坪原煤"];
    var totalData = [yAxisTotalData, yAxisWaterWorks, yAxisOwned];
    var seriesData = [];
    datas.forEach((item, index) => {
      seriesData.push({
        name: item,
        type: "line",
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            //{ type: "min", name: "最小值" },
          ],
          // 自定义标记的样式
          itemStyle: {
            color: "rgba(0,0,0,0.5)", // 点的颜色
          },
          label: {
            show: true, // 是否显示数值
            // formatter: function (param) {
            //   return param.value + " 单位"; // 自定义显示格式
            // },
          },
        },
        //是否是直线
        //smooth: true,
        symbol: "circle",
        symbolSize: 2,
        color: colors[index],
        data: totalData[index],
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors[index],
            },
            {
              offset: 1,
              color: "rgba(0, 173, 253, 0)",
            },
          ]),
        },
      });
    });
    option = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        top: "20%",
        right: "6%",
        left: "10%",
        bottom: "10%",
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff",
        },
        data: datas,
      },
      xAxis: [
        {
          name: "日",
          type: "category",
          data: xAxisData,
          boundaryGap: true, //x轴顶头显示
          axisLine: {
            show: true, //隐藏X轴轴线
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
          },
        },
      ],
      yAxis: [
        {
          //name: "万m³",
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            //show: true, //隐藏X轴轴线
            //坐标轴箭头
            //symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 14,
            formatter: (params) => {
              return params + "";
            },
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
    window.addEventListener("resize", myChart.resize);
  });

  //数据横屏展示
  $(function () {
    var dayData;
    var socket = new SockJS("http://localhost:8081/dzwzws");
    var dayData;
    var stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
      //console.log("Connected: " + frame);
      stompClient.subscribe("/screen/sales", function (data) {
        console.log("实时销售：");
        console.log(JSON.parse(data.body));
        dayData = JSON.parse(data.body);
        //$(".no").find("ul").empty();
        // $("#center-one-5-1").empty();
        // $("#center-one-5-2").empty();
        // $("#center-one-5-3").empty();
        // $("#center-one-5-4").empty();
        $('[id^="center-one-5-"').each(function () {
          $(this).empty();
        });
        dayData.data.slice(0, 3).forEach((item) => {
          $("#center-one-5-1").append($("<li>").text(item.name));
          $("#center-one-5-2").append($("<li>").text(item.value));
        });
        dayData.data.slice(3, 6).forEach((item) => {
          $("#center-one-5-3").append($("<li>").text(item.name));
          $("#center-one-5-4").append($("<li>").text(item.value));
        });
      });
    });
    //$(".no").find("ul").empty();
    // $("#center-one-5-1").empty();
    // $("#center-one-5-2").empty();
    // $("#center-one-5-3").empty();
    // $("#center-one-5-4").empty();
    // dayData.data.slice(0, 3).forEach((item) => {
    //   $("#center-one-5-1").append($("<li>").text(item.name));
    //   $("#center-one-5-2").append($("<li>").text(item.value));
    // });
    // dayData.data.slice(3, 6).forEach((item) => {
    //   $("#center-one-5-3").append($("<li>").text(item.name));
    //   $("#center-one-5-4").append($("<li>").text(item.value));
    // });
  });
  //数据横屏展示
  function initCurrentSaleData(dayData) {
    $('[id^="center-one-5-"').each(function () {
      $(this).empty();
    });
    dayData.slice(0, 3).forEach((item) => {
      $("#center-one-5-1").append($("<li>").text(item.name));
      $("#center-one-5-2").append($("<li>").text(item.value));
    });
    dayData.slice(3, 6).forEach((item) => {
      $("#center-one-5-3").append($("<li>").text(item.name));
      $("#center-one-5-4").append($("<li>").text(item.value));
    });
  }

  //当日各单位销量
  $(function () {
    // 当日各单位销量
    const colors = [
      [
        {
          offset: 0,
          color: "rgba(0, 168, 255,0.8)", // 0% 处的颜色
        },
        {
          offset: 0.35,
          color: "rgba(0, 102, 171, 0.42)", // 35% 处的颜色
        },
        {
          offset: 0.65,
          color: "rgba(0, 102, 171, 0.42)", // 65% 处的颜色
        },
        {
          offset: 1,
          color: "rgba(0, 168, 255,0.8)", // 100% 处的颜色
        },
      ],
      [
        {
          offset: 0,
          color: "rgba(0,255,182)", // 0% 处的颜色
        },
        {
          offset: 0.35,
          color: "rgba(0,255,182, 0.42)", // 35% 处的颜色
        },
        {
          offset: 0.65,
          color: "rgba(0,255,182, 0.42)", // 65% 处的颜色
        },
        {
          offset: 1,
          color: "rgba(0,255,182)", // 100% 处的颜色
        },
      ],
      [
        {
          offset: 0,
          color: "rgba(43,189,231, 0.9)", // 0% 处的颜色
        },
        {
          offset: 0.35,
          color: "rgba(43,189,231, 0.42)", // 35% 处的颜色
        },
        {
          offset: 0.65,
          color: "rgba(43,189,231, 0.42)", // 65% 处的颜色
        },
        {
          offset: 1,
          color: "rgba(43,189,231, 0.9)", // 100% 处的颜色
        },
      ],
    ];
    var dataList = {
      unitName: [
        "本部",
        "汾河",
        "晋南",
        "晋北",
        "宏大",
        "晋牛",
        "五一",
        "正利",
        "万家庄",
        "吕梁山",
        "吕临能化",
        "本部",
        "汾河",
        "晋南",
        "晋北",
        "宏大",
        "晋牛",
        "五一",
        "正利",
        "万家庄",
      ],
      categorys: ["精煤", "中煤", "煤泥"],
      unitValue: [
        [
          1300, 1200, 1200, 1000, 800, 780, 690, 590, 550, 530, 500, 500, 498,
          492, 488, 486, 477, 469, 465, 455,
        ],
        [
          800, 780, 690, 590, 550, 530, 500, 1300, 1200, 1200, 1000, 500, 498,
          492, 488, 486, 477, 469, 465, 455,
        ],
        [
          550, 530, 500, 500, 498, 1000, 800, 780, 690, 590, 492, 488, 486, 477,
          469, 465, 455, 1300, 1200, 1200,
        ],
      ],
    };
    //#region 各单位销量

    var myChart = echarts.init(document.getElementById("center-two-5"));

    var deptNames = dataList.unitName.slice(0, 5);
    var deptValues = dataList.unitValue[0].slice(0, 5);
    var deptValues1 = dataList.unitValue[1].slice(0, 5);
    var deptValues2 = dataList.unitValue[2].slice(0, 5);
    // var deptProMax = []; //背景按最大值
    // for (let i = 0; i < dataList.unitValue.length; i++) {
    //   deptProMax.push(dataList.unitValue[0]);
    // }
    //console.log(deptProMax);
    option = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        showContent: true,
        trigger: "axis",
        backgroundColor: "rgba(8,36,68,.7)",
        color: "#fff",
        textStyle: {
          color: "#fff",
        },
      },
      textStyle: {
        color: "#c0c3cd",
        fontSize: 14,
      },
      legend: {
        top: "0%",
        left: "75%",
        itemWidth: 15,
        itemHeight: 10,
        icon: "roundRect",
        textStyle: {
          color: "#c0c3cd",
        },
      },
      grid: {
        top: "10%",
        left: "8%",
        bottom: "20%",
        right: "0%",
      },
      xAxis: {
        nameTextStyle: {
          color: "#c0c3cd",
          padding: [0, 0, -10, 0],
          fontSize: 14,
        },
        axisLabel: {
          interval: 0,
          rotate: "45",
          formatter: function (value) {
            if (value.length > 3) {
              return `${value.slice(0, 2)}...`;
            }
            return value;
          },
          textStyle: {
            color: "#639FD2", //坐标轴字颜色
          },
          margin: 15,
        },
        axisTick: {
          show: false, //隐藏X轴刻度
        },
        splitLine: {
          //网格线
          show: false,
        },
        data: deptNames,
        type: "category",
      },
      yAxis: {
        type: "value",
        max: 1500,
        axisLine: {
          show: false, //隐藏X轴轴线
          lineStyle: {
            color: "#11417a",
          },
        },
        axisTick: {
          show: false, //隐藏X轴刻度
        },
        axisLabel: {
          textStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          //网格线
          show: false,
        },
      },
      series: [
        {
          name: dataList.categorys[0],
          data: deptValues,
          type: "bar",
          zlevel: 1,
          showBackground: false,
          // tooltip: {
          //   textStyle: {
          //     color: barColors[0],
          //   },
          // },
          barMaxWidth: "auto",
          // "barWidth": 7,
          barGap: "80%",
          barWidth: 20,
          itemStyle: {
            barBorderRadius: [10, 10, 0, 0], // 圆角（左上、右上、右下、左下）
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: colors[0],
            },
          },
          label: {
            show: true,
            position: "top",
            distance: 5,
            color: "#fff",
            fontSize: 12,
          },
        },
        {
          name: dataList.categorys[1],
          data: deptValues1,
          type: "bar",
          zlevel: 1,
          showBackground: false,
          // backgroundStyle: {
          //   color: "#0c3252",
          // },
          barMaxWidth: "auto",
          // "barWidth": 7,
          barWidth: 20,
          itemStyle: {
            barBorderRadius: [10, 10, 0, 0], // 圆角（左上、右上、右下、左下）
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: colors[1],
            },
          },
          label: {
            show: true,
            position: "top",
            distance: 5,
            color: "#fff",
            fontSize: 12,
          },
        },
        {
          name: dataList.categorys[2],
          data: deptValues2,
          type: "bar",
          zlevel: 1,
          showBackground: false,
          // backgroundStyle: {
          //   color: "#0c3252",
          // },
          barMaxWidth: "auto",
          // "barWidth": 7,
          barWidth: 20,
          itemStyle: {
            barBorderRadius: [10, 10, 0, 0], // 圆角（左上、右上、右下、左下）
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              type: "linear",
              global: false,
              colorStops: colors[2],
            },
          },
          label: {
            show: true,
            position: "top",
            distance: 5,
            color: "#fff",
            fontSize: 12,
          },
        },
        // {
        //   //name: "背景",
        //   type: "bar",
        //   barWidth: 20,
        //   barGap: "-100%",
        //   data: deptProMax,
        //   itemStyle: {
        //     normal: {
        //       color: "rgba(24,31,68,0)",
        //       barBorderRadius: [10, 10, 0, 0],
        //     },
        //   },
        // },
      ],
    };
    myChart.setOption(option);
    var count2 = 5;

    function playDept() {
      deptNames.push(dataList.unitName[count2]);
      deptValues.push(dataList.unitValue[0][count2]);
      deptValues1.push(dataList.unitValue[1][count2]);
      deptValues2.push(dataList.unitValue[2][count2]);
      deptNames.shift();
      deptValues.shift();
      deptValues1.shift();
      deptValues2.shift();
      if (count2 === dataList.unitName.length - 1) {
        count2 = -1;
      }
      count2++;
      myChart.setOption(option);
    }
    var intervalId = setTimeout(autoPlay, 3000);
    function autoPlay() {
      clearTimeout(intervalId); //清除定时器
      playDept();
      intervalId = setTimeout(autoPlay, 3000);
    }
    //#endregion
    window.addEventListener("resize", myChart.resize());
  });
}
//数据总览
function showData() {
  // 当年各单位销量、客户销量、年度销量
  const colors = [
    [
      {
        offset: 0,
        color: "rgba(0, 168, 255,0.8)", // 0% 处的颜色
      },
      {
        offset: 0.35,
        color: "rgba(0, 102, 171, 0.42)", // 35% 处的颜色
      },
      {
        offset: 0.65,
        color: "rgba(0, 102, 171, 0.42)", // 65% 处的颜色
      },
      {
        offset: 1,
        color: "rgba(0, 168, 255,0.8)", // 100% 处的颜色
      },
    ],
    [
      {
        offset: 0,
        color: "rgba(0,255,182)", // 0% 处的颜色
      },
      {
        offset: 0.35,
        color: "rgba(0,255,182, 0.42)", // 35% 处的颜色
      },
      {
        offset: 0.65,
        color: "rgba(0,255,182, 0.42)", // 65% 处的颜色
      },
      {
        offset: 1,
        color: "rgba(0,255,182)", // 100% 处的颜色
      },
    ],
    [
      {
        offset: 0,
        color: "rgba(43,189,231, 0.9)", // 0% 处的颜色
      },
      {
        offset: 0.35,
        color: "rgba(43,189,231, 0.42)", // 35% 处的颜色
      },
      {
        offset: 0.65,
        color: "rgba(43,189,231, 0.42)", // 65% 处的颜色
      },
      {
        offset: 1,
        color: "rgba(43,189,231, 0.9)", // 100% 处的颜色
      },
    ],
  ];
  var dataList = {
    unitName: [
      "本部",
      "汾河",
      "晋南",
      "晋北",
      "宏大",
      "晋牛",
      "五一",
      "正利",
      "万家庄",
      "吕梁山",
      "吕临能化",
      "本部",
      "汾河",
      "晋南",
      "晋北",
      "宏大",
      "晋牛",
      "五一",
      "正利",
      "万家庄",
    ],
    categorys: ["精煤", "中煤", "煤泥"],
    unitValue: [
      [
        1300, 1200, 1200, 1000, 800, 780, 690, 590, 550, 530, 500, 500, 498,
        492, 488, 486, 477, 469, 465, 455,
      ],
      [
        800, 780, 690, 590, 550, 530, 500, 1300, 1200, 1200, 1000, 500, 498,
        492, 488, 486, 477, 469, 465, 455,
      ],
      [
        550, 530, 500, 500, 498, 1000, 800, 780, 690, 590, 492, 488, 486, 477,
        469, 465, 455, 1300, 1200, 1200,
      ],
    ],
    salvProName: [
      "客户ABC",
      "客户BEF",
      "客户CDE",
      "客户DFE",
      "客户EDE",
      "测试FEF",
      "测试CDE",
      "测试DFE",
      "测试EDE",
      "测试FEF",
    ],
    salvProValue: [239, 181, 154, 144, 135, 117, 110, 89, 70, 60],
  };
  // var socket = new SockJS("http://localhost:8081/dzwzws");
  // var dayData;
  // var stompClient = Stomp.over(socket);
  // stompClient.connect({}, function (frame) {
  //   //console.log("Connected: " + frame);
  //   stompClient.subscribe("/screen/inner", function (data) {
  //     console.log("每日任务：");
  //     console.log(JSON.parse(data.body));
  //     dayData = JSON.parse(data.body);
  //   });
  // });

  (function () {
    //#region   历年年度销量
    var myChart1 = echarts.init(document.getElementById("left-three-1"));
    var dataList2 = {
      category: ["精煤", "中煤", "煤泥"],
      xdata: ["2020", "2021", "2022", "2023", "2024"],
      result: [
        [210, 220, 290, 200, 205],
        [700, 840, 710, 690, 590],
        [400, 400, 400, 500, 400],
      ],
      colors: ["#00CC99", "#33CCFF", "#9933FF"],
    };
    option1 = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "none",
        },
        position: function (point, params, dom, rect, size) {
          // 提示框位置
          let x = 0;
          let y = 0;
          //提示框定位
          if (point[0] + size.contentSize[0] < size.viewSize[0]) {
            x = point[0];
          } else if (point[0] > size.contentSize[0]) {
            x = point[0] - size.contentSize[0];
          } else {
            x = "30%";
          }
          if (point[1] > size.contentSize[1]) {
            y = point[1] - size.contentSize[1];
          } else if (point[1] + size.contentSize[1] < size.viewSize[1]) {
            y = point[1];
          } else {
            y = "30%";
          }
          return [x, y];
        },
        formatter: (params) => {
          return `
            <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #fff;margin-bottom:8px;">${params[0].name}年</div>
            <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #fff;margin-bottom:4px;">${dataList2.category[1]}：${params[1].value}</div>
            <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #fff;margin-bottom:4px;">${dataList2.category[2]}：${params[2].value}</div>
            <div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #fff;margin-bottom:4px;">${dataList2.category[0]}：${params[0].value}</div>`;
        },
        extraCssText:
          "opacity: 0.8;background-color:rgba(0,0,0,0.5);padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;",
      },
      title: {
        //text: "近七天产量趋势",
        textStyle: {
          align: "center",
          color: "#fff",
          fontSize: 28,
        },
        top: "5%",
        left: "center",
      },
      grid: {
        borderWidth: 0,
        top: "14%",
        left: "10%",
        right: "6%",
        bottom: "10%",
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        top: "2%",
        textStyle: {
          fontSize: 15,
          //fontFamily: "MicrosoftYaHeiUI",
          color: "#FFFFFF",
        },
      },
      xAxis: [
        {
          name: "年",
          type: "category",
          axisLine: {
            show: true, //隐藏X轴轴线
            symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
              width: 1,
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 15,
          },
          data: dataList2.xdata,
        },
      ],
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            //show: true, //隐藏X轴轴线
            symbol: ["none", "arrow"],
            lineStyle: {
              color: "#fff",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            color: "#fff",
            fontSize: 15,
            formatter: (params) => {
              return params + "";
            },
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: [
        // {
        //   name: dataList2.category[1],
        //   type: "line",
        //   symbolSize: 4,
        //   symbol: "circle",
        //   itemStyle: {
        //     normal: {
        //       label: {
        //         show: false,
        //         position: "top",
        //         formatter: (params) => {
        //           return params.value + "%";
        //         },
        //         textStyle: {
        //           fontSize: 12,
        //           color: "#fff",
        //         },
        //       },
        //       color: "#33CCFF",
        //       barBorderRadius: 0,
        //     },
        //   },
        //   lineStyle: {
        //     normal: {
        //       width: 4,
        //       color: {
        //         type: "linear",
        //         x: 0,
        //         y: 0,
        //         x2: 0,
        //         y2: 1,
        //         colorStops: [
        //           {
        //             offset: 0,
        //             color: "#33CCFF", // 0% 处的颜色
        //           },
        //           {
        //             offset: 1,
        //             color: "#33CCFF", // 100% 处的颜色
        //           },
        //         ],
        //         global: false, // 缺省为 false
        //       },
        //     },
        //   },
        //   data: dataList2.result[1],
        // },
        // {
        //   name: dataList2.category[2],
        //   type: "line",
        //   symbolSize: 4,
        //   symbol: "circle",
        //   itemStyle: {
        //     normal: {
        //       label: {
        //         show: false,
        //         position: "top",
        //         formatter: (params) => {
        //           return params.value + "%";
        //         },
        //         textStyle: {
        //           fontSize: 12,
        //           color: "#fff",
        //         },
        //       },
        //       color: "#9933FF",
        //       barBorderRadius: 0,
        //     },
        //   },
        //   lineStyle: {
        //     normal: {
        //       width: 4,
        //       color: {
        //         type: "linear",
        //         x: 0,
        //         y: 0,
        //         x2: 0,
        //         y2: 1,
        //         colorStops: [
        //           {
        //             offset: 0,
        //             color: "#9933FF", // 0% 处的颜色
        //           },
        //           {
        //             offset: 1,
        //             color: "#9933FF", // 100% 处的颜色
        //           },
        //         ],
        //         global: false, // 缺省为 false
        //       },
        //     },
        //   },
        //   data: dataList2.result[2],
        // },
      ],
    };
    dataList2.category.forEach((item, index) => {
      option1.series.push({
        name: dataList2.category[index],
        type: "line",
        symbolSize: 4,
        symbol: "circle",
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: "top",
              formatter: (params) => {
                return params.value + "%";
              },
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            color: dataList2.colors[index],
            barBorderRadius: 0,
          },
        },
        lineStyle: {
          normal: {
            width: 4,
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: dataList2.colors[index], // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: dataList2.colors[index], // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        data: dataList2.result[index],
      });
    });
    //myChart2.setOption(option2); //历年年度销量

    var count1 = 0;
    var dataLength = dataList2.result[0].length;
    myChart1.setOption(option1);

    function playPrevious() {
      myChart1.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: count1 % dataLength,
      });
      count1++;
    }
    //#endregion

    //#region 各单位销量

    var myChart2 = echarts.init(document.getElementById("center-two-1"));

    var deptNames = dataList.unitName.slice(0, 5);
    var deptValues = dataList.unitValue[0].slice(0, 5);
    var deptValues1 = dataList.unitValue[1].slice(0, 5);
    var deptValues2 = dataList.unitValue[2].slice(0, 5);
    var deptTotal = [deptValues, deptValues1, deptValues2];
    // var deptProMax = []; //背景按最大值
    // for (let i = 0; i < dataList.unitValue.length; i++) {
    //   deptProMax.push(dataList.unitValue[0]);
    // }
    //console.log(deptProMax);
    var series2 = [];
    dataList.categorys.forEach((item, index) => {
      series2.push({
        name: item,
        // data: deptValues,
        data: deptTotal[index],
        type: "bar",
        zlevel: 1,
        showBackground: false,
        // tooltip: {
        //   textStyle: {
        //     color: barColors[0],
        //   },
        // },
        barMaxWidth: "auto",
        // "barWidth": 7,
        barGap: "80%",
        barWidth: 20,
        itemStyle: {
          barBorderRadius: [10, 10, 0, 0], // 圆角（左上、右上、右下、左下）
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: colors[index],
          },
        },
        label: {
          show: true,
          position: "top",
          distance: 5,
          color: "#fff",
          fontSize: 12,
        },
      });
    });
    option2 = {
      backgroundColor: "rgba(0,0,0,0)",
      tooltip: {
        showContent: true,
        trigger: "axis",
        backgroundColor: "rgba(8,36,68,.7)",
        color: "#fff",
        textStyle: {
          color: "#fff",
        },
      },
      textStyle: {
        color: "#c0c3cd",
        fontSize: 14,
      },
      legend: {
        top: "0%",
        left: "75%",
        itemWidth: 15,
        itemHeight: 10,
        icon: "roundRect",
        textStyle: {
          color: "#c0c3cd",
        },
      },
      grid: {
        top: "10%",
        left: "8%",
        bottom: "20%",
        right: "0%",
      },
      xAxis: {
        nameTextStyle: {
          color: "#c0c3cd",
          padding: [0, 0, -10, 0],
          fontSize: 14,
        },
        axisLabel: {
          interval: 0,
          rotate: "45",
          formatter: function (value) {
            if (value.length > 3) {
              return `${value.slice(0, 2)}...`;
            }
            return value;
          },
          textStyle: {
            color: "#639FD2", //坐标轴字颜色
          },
          margin: 15,
        },
        axisTick: {
          show: false, //隐藏X轴刻度
        },
        splitLine: {
          //网格线
          show: false,
        },
        data: deptNames,
        type: "category",
      },
      yAxis: {
        type: "value",
        max: 1500,
        axisLine: {
          show: false, //隐藏X轴轴线
          lineStyle: {
            color: "#11417a",
          },
        },
        axisTick: {
          show: false, //隐藏X轴刻度
        },
        axisLabel: {
          textStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          //网格线
          show: false,
        },
      },
      series: series2,
      //   [
      //   {
      //     name: dataList.categorys[0],
      //     // data: deptValues,
      //     data: deptTotal[0],
      //     type: "bar",
      //     zlevel: 1,
      //     showBackground: false,
      //     // tooltip: {
      //     //   textStyle: {
      //     //     color: barColors[0],
      //     //   },
      //     // },
      //     barMaxWidth: "auto",
      //     // "barWidth": 7,
      //     barGap: "80%",
      //     barWidth: 20,
      //     itemStyle: {
      //       barBorderRadius: [10, 10, 0, 0], // 圆角（左上、右上、右下、左下）
      //       color: {
      //         x: 0,
      //         y: 0,
      //         x2: 0,
      //         y2: 1,
      //         type: "linear",
      //         global: false,
      //         colorStops: colors[0],
      //       },
      //     },
      //     label: {
      //       show: true,
      //       position: "top",
      //       distance: 5,
      //       color: "#fff",
      //       fontSize: 12,
      //     },
      //   },
      //   {
      //     name: dataList.categorys[1],
      //     // data: deptValues1,
      //     data: deptTotal[1],
      //     type: "bar",
      //     zlevel: 1,
      //     showBackground: false,
      //     // backgroundStyle: {
      //     //   color: "#0c3252",
      //     // },
      //     barMaxWidth: "auto",
      //     // "barWidth": 7,
      //     barWidth: 20,
      //     itemStyle: {
      //       barBorderRadius: [10, 10, 0, 0], // 圆角（左上、右上、右下、左下）
      //       color: {
      //         x: 0,
      //         y: 0,
      //         x2: 0,
      //         y2: 1,
      //         type: "linear",
      //         global: false,
      //         colorStops: colors[1],
      //       },
      //     },
      //     label: {
      //       show: true,
      //       position: "top",
      //       distance: 5,
      //       color: "#fff",
      //       fontSize: 12,
      //     },
      //   },
      //   {
      //     name: dataList.categorys[2],
      //     // data: deptValues2,
      //     data: deptTotal[2],
      //     type: "bar",
      //     zlevel: 1,
      //     showBackground: false,
      //     // backgroundStyle: {
      //     //   color: "#0c3252",
      //     // },
      //     barMaxWidth: "auto",
      //     // "barWidth": 7,
      //     barWidth: 20,
      //     itemStyle: {
      //       barBorderRadius: [10, 10, 0, 0], // 圆角（左上、右上、右下、左下）
      //       color: {
      //         x: 0,
      //         y: 0,
      //         x2: 0,
      //         y2: 1,
      //         type: "linear",
      //         global: false,
      //         colorStops: colors[2],
      //       },
      //     },
      //     label: {
      //       show: true,
      //       position: "top",
      //       distance: 5,
      //       color: "#fff",
      //       fontSize: 12,
      //     },
      //   },
      //   // {
      //   //   //name: "背景",
      //   //   type: "bar",
      //   //   barWidth: 20,
      //   //   barGap: "-100%",
      //   //   data: deptProMax,
      //   //   itemStyle: {
      //   //     normal: {
      //   //       color: "rgba(24,31,68,0)",
      //   //       barBorderRadius: [10, 10, 0, 0],
      //   //     },
      //   //   },
      //   // },
      // ],
    };

    myChart2.setOption(option2);
    var count2 = 5;

    function playDept() {
      deptNames.push(dataList.unitName[count2]);
      // deptTotal[0].push(dataList.unitValue[0][count2]);
      // deptTotal[1].push(dataList.unitValue[1][count2]);
      // deptTotal[2].push(dataList.unitValue[2][count2]);
      deptTotal.forEach((item, index) => {
        item.push(dataList.unitValue[index][count2]);
      });
      deptNames.shift();
      // deptValues.shift();
      // deptValues1.shift();
      // deptValues2.shift();
      // deptTotal[0].shift();
      // deptTotal[1].shift();
      // deptTotal[2].shift();
      deptTotal.forEach((item, index) => {
        item.shift();
      });

      if (count2 === dataList.unitName.length - 1) {
        count2 = -1;
      }
      count2++;
      myChart2.setOption(option2);
    }
    //#endregion

    //#region 当年客户销量
    var myChart3 = echarts.init(document.getElementById("right-three-1"));
    var saleNames = dataList.salvProName.slice(0, 5);
    var saleValues = dataList.salvProValue.slice(0, 5);
    var salvProMax = []; //背景按最大值
    for (let i = 0; i < dataList.salvProValue.length; i++) {
      salvProMax.push(dataList.salvProValue[0]);
    }
    option3 = {
      backgroundColor: "rgba(0,0,0,0)",
      grid: {
        left: "2%",
        right: "2%",
        bottom: "2%",
        top: "2%",
        containLabel: true,
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "none",
        },
        formatter: function (params) {
          return params[0].name + " : " + params[0].value;
        },
      },
      xAxis: {
        show: false,
        max: 300,
        type: "value",
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: saleNames,
        },
        {
          type: "category",
          inverse: true,
          axisTick: "none",
          axisLine: "none",
          show: true,
          axisLabel: {
            show: false,
            textStyle: {
              color: "#ffffff",
              fontSize: "12",
            },
          },
          data: saleValues,
        },
      ],
      series: [
        {
          name: "值",
          type: "bar",
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 20,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "rgb(57,89,255,1)",
                },
                {
                  offset: 1,
                  color: "rgb(46,200,207,1)",
                },
              ]),
            },
          },
          label: {
            show: true,
            position: "right",
            color: "#ffffff",
          },
          barWidth: 20,
          data: saleValues,
        },
        // {
        //   name: "背景",
        //   type: "bar",
        //   barWidth: 15,
        //   barGap: "-100%",
        //   data: salvProMax,
        //   itemStyle: {
        //     normal: {
        //       color: "rgba(24,31,68,1)",
        //       barBorderRadius: 30,
        //     },
        //   },
        // },
      ],
    };
    // 3. 配置项和数据给我们的实例化对象
    myChart3.setOption(option3); //当年客户销量
    var count3 = 5;

    function playSale() {
      saleNames.push(dataList.salvProName[count3]);
      saleValues.push(dataList.salvProValue[count3]);
      saleNames.shift();
      saleValues.shift();
      if (count3 === dataList.salvProName.length - 1) {
        count3 = -1;
      }
      count3++;
      myChart3.setOption(option3);
    }
    //#endregion

    var intervalId = setTimeout(autoPlay, 3000);
    function autoPlay() {
      clearTimeout(intervalId); //清除定时器
      playSale();
      playDept();
      playPrevious();
      intervalId = setTimeout(autoPlay, 3000);
    }

    //跟随屏幕一起缩放
    window.addEventListener("resize", () => {
      myChart1.resize();
      myChart2.resize();
      myChart3.resize();
    });
  })();
  //return intervalId;
}
// 各煤种销量占比
(function () {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("left-two-1"));

  var datas = [
    {
      name: "精煤",
      value: 100,
      children: [
        {
          name: "本部",
          value: 70,
          children: [
            {
              name: "辛置矿",
              value: 40,
            },
            {
              name: "李雅庄矿",
              value: 30,
            },
            {
              name: "团柏矿",
              value: 30,
            },
          ],
        },
        {
          name: "汾河公司",
          value: 30,
          children: [
            {
              name: "三级1-2-1",
              value: 10,
            },
            {
              name: "三级1-2-2",
              value: 20,
            },
          ],
        },
        {
          name: "晋南",
          value: 30,
          children: [
            {
              name: "薛虎沟煤业",
              value: 10,
            },
            {
              name: "薛虎沟洗煤厂",
              value: 20,
            },
          ],
        },
        {
          name: "晋北",
          value: 30,
          children: [
            {
              name: "晋北煤业",
              value: 10,
            },
            {
              name: "晋北洗煤厂",
              value: 20,
            },
          ],
        },
      ],
    },
    {
      name: "中煤",
      value: 150,
      children: [
        {
          name: "本部",
          value: 70,
          children: [
            {
              name: "辛置矿",
              value: 40,
            },
            {
              name: "李雅庄矿",
              value: 30,
            },
            {
              name: "团柏矿",
              value: 30,
            },
          ],
        },
        {
          name: "汾河公司",
          value: 30,
          children: [
            {
              name: "赵城站",
              value: 10,
            },
            {
              name: "三交河",
              value: 20,
            },
            {
              name: "回坡底",
              value: 20,
            },
          ],
        },
        {
          name: "晋南",
          value: 30,
          children: [
            {
              name: "薛虎沟煤业",
              value: 10,
            },
            {
              name: "薛虎沟洗煤厂",
              value: 20,
            },
          ],
        },
        {
          name: "吕梁山",
          value: 30,
          children: [
            {
              name: "方山洗煤厂",
              value: 10,
            },
            {
              name: "全顺达洗煤厂",
              value: 20,
            },
          ],
        },
      ],
    },
    {
      name: "煤泥",
      value: 150,
      children: [
        {
          name: "本部",
          value: 70,
          children: [
            {
              name: "辛置矿",
              value: 40,
            },
            {
              name: "李雅庄矿",
              value: 30,
            },
            {
              name: "团柏矿",
              value: 30,
            },
          ],
        },
        {
          name: "汾河公司",
          value: 30,
          children: [
            {
              name: "赵城站",
              value: 10,
            },
            {
              name: "三交河",
              value: 20,
            },
            {
              name: "回坡底",
              value: 20,
            },
          ],
        },
        {
          name: "晋南",
          value: 30,
          children: [
            {
              name: "薛虎沟煤业",
              value: 10,
            },
            {
              name: "薛虎沟洗煤厂",
              value: 20,
            },
          ],
        },
        {
          name: "吕梁山",
          value: 30,
          children: [
            {
              name: "方山洗煤厂",
              value: 10,
            },
            {
              name: "全顺达洗煤厂",
              value: 20,
            },
          ],
        },
      ],
    },
  ];

  var options = {
    //id: optionId,
    // title: {
    //   // text: data[0][2],
    //   // data: data[0][0],
    //   top: "3%",
    //   textStyle: {
    //     color: "#fff",
    //     fontSize: 16,
    //   },
    // },
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)",
    },
    backgroundColor: "rgba(0, 0, 0, 0)",
    // color: [
    //   new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //     { offset: 0, color: "#65aaff" },
    //     { offset: 1, color: "rgba(101, 170, 255, 0.5)" },
    //   ]),
    //   new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //     { offset: 0, color: "#1ae6b4" },
    //     { offset: 1, color: "rgba(26, 230, 180, 0.5)" },
    //   ]),
    //   new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //     { offset: 0, color: "#00e4ff" },
    //     { offset: 1, color: "rgba(0, 228, 255, 0.5)" },
    //   ]),
    //   new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    //     { offset: 0, color: "#ffcc85" },
    //     { offset: 1, color: "rgba(227, 183, 121, 0.5)" },
    //   ]),
    // ],
    legend: {
      //orient: "vertical",
      left: "left",
      top: "3%",
      // // 修改小图标的大小
      // itemWidth: 10,
      // itemHeight: 10,
      // // 修改图例组件的文字为 12px
      // textStyle: {
      //   color: "rgba(255,255,255,.5)",
      //   fontSize: "12",
      // },
      orient: "vertical", // 'vertical'
      x: "center", // 'center' | 'left' | {number},
      y: "80", // 'center' | 'bottom' | {number}
      // padding: 10, // [5, 10, 15, 20]
      // itemGap: 20,
      textStyle: {
        color: "#c3cad9",
      },
    },
    // visualMap: {
    //   show: false,
    //   min: 500,
    //   max: 600,
    //   inRange: {
    //     //colorLightness: [0, 1]
    //   },
    // },
    series: [
      {
        type: "pie",
        roseType: "radius",
        radius: "50%",
        selectedMode: "single",
        selectedOffset: 10,
        clockwise: true,
        center: ["50%", "50%"],
        color: ["#43cadd", "#3893e5", "#E271DE"],
        roseType: "radius",
        itemStyle: {
          borderWidth: "20",
          color: "pink",
          borderColor: "#FFF",
          normal: {
            borderWidth: "10",
            borderColor: "rgba(0,0,0,0)",
          },
        },
        data: datas,
        avoidLabelOverlap: false,
        // label: {
        //   show: true,
        // },
        // 链接文字和图形的线是否显示
        labelLine: {
          normal: {
            backgroundColor: "yellow",
            borderColor: "skyblue",
            borderWidth: 10,
            lineStyle: {
              borderColor: "skyblue",
              borderWidth: 10,
              backgroundColor: "yellow",
            },
          },
        },
        label: {
          normal: {
            // formatter: ['{c|{b}{d}%}', '{b|{b}}'].join('\n'),
            // formatter: ["{b|{b}{d}%}", "{c|{c}万元}"].join("\n"),
            formatter: ["{b|{b}}", "{c|{c}万吨}"].join("\n"),
            rich: {
              b: {
                color: "#d9efff",
                fontSize: 15,
                height: 40,
              },
              c: {
                color: "#fff",
                fontSize: 14,
                fontWeight: "bold",
                lineHeight: 5,
              },
            },
          },
        },
      },
    ],
    graphic: [
      {
        type: "text",
        right: 30,
        top: 10,
        style: {
          text: "返回",
          color: "#fff",
          fontSize: 12,
          fill: "white",
        },
        onclick: function () {
          goBack();
        },
      },
    ],
  };
  // A stack to remember previous option id
  var optionStack = [];

  function goForward(optionId) {
    optionStack.push(myChart.getOption().id); // push current option id into stack.
    console.log(optionId);
    //myChart.getOption().series.data =
    console.log();
    myChart.setOption(datas[optionId]);
  }

  function goBack() {
    console.log(optionStack);
    console.log("===================");
    optionStack.pop();
    if (optionStack.length > 0) {
      myChart.setOption({
        series: [
          {
            name: optionStack[0].name,
            data: optionStack[0].children,
          },
        ],
      });
    } else {
      myChart.setOption({
        series: [
          {
            data: datas,
          },
        ],
      });
    }
  }
  //options = allOptions["霍州煤电"]; // The initial option is the root data option
  // const getNextLevelData = (index) => {
  //   console.log(datas);
  //   return datas[index];
  // };
  myChart.on("click", "series", (params) => {
    if (params.data.children) {
      myChart.setOption({
        series: [
          {
            name: params.data.name,
            data: params.data.children,
          },
        ],
      });
      optionStack.push(params.data);
      console.log("加入的数据：");
      console.log(optionStack);
    } else {
      console.log("到底了");
    }
  });
  options && myChart.setOption(options);
  //跟随屏幕一起缩放
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();

// 当年内调销量环比
(function () {
  // 基于准备好的dom，初始化echarts实例
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("right-two-1"));

  var datas = [
    {
      name: "精煤",
      value: 100,
      children: [
        {
          name: "本部",
          value: 70,
          children: [
            {
              name: "辛置矿",
              value: 40,
            },
            {
              name: "李雅庄矿",
              value: 30,
            },
            {
              name: "团柏矿",
              value: 50,
            },
          ],
        },
        {
          name: "汾河公司",
          value: 30,
          children: [
            {
              name: "三级1-2-1",
              value: 10,
            },
            {
              name: "三级1-2-2",
              value: 20,
            },
          ],
        },
        {
          name: "晋南",
          value: 30,
          children: [
            {
              name: "薛虎沟煤业",
              value: 10,
            },
            {
              name: "薛虎沟洗煤厂",
              value: 20,
            },
          ],
        },
        {
          name: "晋北",
          value: 30,
          children: [
            {
              name: "晋北煤业",
              value: 10,
            },
            {
              name: "晋北洗煤厂",
              value: 20,
            },
          ],
        },
      ],
    },
    {
      name: "中煤",
      value: 150,
      children: [
        {
          name: "本部",
          value: 70,
          children: [
            {
              name: "辛置矿",
              value: 40,
            },
            {
              name: "李雅庄矿",
              value: 30,
            },
            {
              name: "团柏矿",
              value: 30,
            },
          ],
        },
        {
          name: "汾河公司",
          value: 30,
          children: [
            {
              name: "赵城站",
              value: 10,
            },
            {
              name: "三交河",
              value: 20,
            },
            {
              name: "回坡底",
              value: 20,
            },
          ],
        },
        {
          name: "晋南",
          value: 30,
          children: [
            {
              name: "薛虎沟煤业",
              value: 10,
            },
            {
              name: "薛虎沟洗煤厂",
              value: 20,
            },
          ],
        },
        {
          name: "吕梁山",
          value: 30,
          children: [
            {
              name: "方山洗煤厂",
              value: 10,
            },
            {
              name: "全顺达洗煤厂",
              value: 20,
            },
          ],
        },
      ],
    },
    {
      name: "煤泥",
      value: 200,
      children: [
        {
          name: "本部",
          value: 70,
          children: [
            {
              name: "辛置矿",
              value: 40,
            },
            {
              name: "李雅庄矿",
              value: 30,
            },
            {
              name: "团柏矿",
              value: 30,
            },
          ],
        },
        {
          name: "汾河公司",
          value: 30,
          children: [
            {
              name: "赵城站",
              value: 10,
            },
            {
              name: "三交河",
              value: 20,
            },
            {
              name: "回坡底",
              value: 20,
            },
          ],
        },
        {
          name: "晋南",
          value: 30,
          children: [
            {
              name: "薛虎沟煤业",
              value: 10,
            },
            {
              name: "薛虎沟洗煤厂",
              value: 20,
            },
          ],
        },
        {
          name: "吕梁山",
          value: 30,
          children: [
            {
              name: "方山洗煤厂",
              value: 10,
            },
            {
              name: "全顺达洗煤厂",
              value: 20,
            },
          ],
        },
      ],
    },
  ];
  var options = {
    //id: optionId,
    // title: {
    //   // text: data[0][2],
    //   // data: data[0][0],
    //   top: "3%",
    //   textStyle: {
    //     color: "#fff",
    //     fontSize: 16,
    //   },
    // },
    backgroundColor: "rgba(0,0,0,0)",
    //color: ["#FFCC00", "#00CBFF", "#28F2E6"],
    tooltip: {
      trigger: "item",
      formatter: "{b} : {d}<br/> {c}",
    },
    legend: {
      //orient: "vertical",
      left: "left",
      top: "3%",
      // // 修改小图标的大小
      // itemWidth: 10,
      // itemHeight: 10,
      // // 修改图例组件的文字为 12px
      // textStyle: {
      //   color: "rgba(255,255,255,.5)",
      //   fontSize: "12",
      // },
      orient: "vertical", // 'vertical'
      x: "center", // 'center' | 'left' | {number},
      y: "80", // 'center' | 'bottom' | {number}
      // padding: 10, // [5, 10, 15, 20]
      // itemGap: 20,
      textStyle: {
        color: "#c3cad9",
      },
    },
    // legend: {
    //   orient: "horizontal",
    //   icon: "circle",
    //   top: 5,
    //   x: "center",
    //   textStyle: {
    //     color: "#fff",
    //   },
    // },
    series: {
      type: "pie",
      radius: ["40%", "50%"],
      center: ["50%", "50%"],
      color: ["#0E7CE2", "#00FFFF", "#E271DE", "#4AEAB0", "#F8456B"],
      //roseType: "radius",
      data: datas,
      avoidLabelOverlap: false,
      label: {
        normal: {
          formatter: "{b|{b}}\n{hr|}\n{d|{d}}",
          rich: {
            b: {
              fontSize: 14,
              color: "#d9efff",
              align: "left",
              padding: 4,
            },
            hr: {
              borderColor: "#12EABE",
              width: "100%",
              borderWidth: 2,
              height: 0,
            },
            d: {
              fontSize: 14,
              color: "#fff",
              align: "left",
              padding: 4,
            },
            c: {
              fontSize: 20,
              color: "#fff",
              align: "left",
              padding: 4,
            },
          },
        },
      },
      // 链接文字和图形的线是否显示
      labelLine: {
        normal: {
          show: true,
          length: 20,
          length2: 20,
          lineStyle: {
            color: "#12EABE",
            width: 2,
          },
        },
      },
    },
    graphic: [
      {
        type: "text",
        right: 30,
        top: 10,
        style: {
          text: "返回",
          color: "#fff",
          fontSize: 12,
          fill: "white",
        },
        onclick: function () {
          goBack();
        },
      },
    ],
  };
  // A stack to remember previous option id
  var optionStack = [];

  function goForward(optionId) {
    optionStack.push(myChart.getOption().id); // push current option id into stack.
    console.log(optionId);
    //myChart.getOption().series.data =
    console.log();
    myChart.setOption(datas[optionId]);
  }

  function goBack() {
    console.log(optionStack);
    console.log("===================");
    optionStack.pop();
    if (optionStack.length > 0) {
      myChart.setOption({
        series: [
          {
            name: optionStack[0].name,
            data: optionStack[0].children,
          },
        ],
      });
    } else {
      myChart.setOption({
        series: [
          {
            data: datas,
          },
        ],
      });
    }
  }
  //options = allOptions["霍州煤电"]; // The initial option is the root data option
  // const getNextLevelData = (index) => {
  //   console.log(datas);
  //   return datas[index];
  // };
  myChart.on("click", "series", (params) => {
    if (params.data.children) {
      myChart.setOption({
        series: [
          {
            name: params.data.name,
            data: params.data.children,
          },
        ],
      });
      optionStack.push(params.data);
      console.log("加入的数据：");
      console.log(optionStack);
    } else {
      console.log("到底了");
    }
  });
  options && myChart.setOption(options);
  //跟随屏幕一起缩放
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();
